begin process at 2010 02 09 20:40:48
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

WebDesign

 > CASCADING MENU CSS

CASCADING MENU CSS


 Information sur la source

Note :
10 / 10 - par 4 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :WebDesign Classé sous :menu css, menu cascade, menu horizontal Niveau :Débutant Date de création :15/03/2009 Date de mise à jour :16/03/2009 12:26:27 Vu / téléchargé :8 261 / 1 501

Auteur : labotemplates

Ecrire un message privé
Site perso
Commentaire sur cette source (19)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Et un menu cascadé en CSS, encore un ! Hop...
En fait j'ai eu un mal de chien à trouver une version à la fois accessible, simple et portable sur tout OS et navigateur. Donc je me la suis faite !
Ok, j'ai pas du chercher certains vont dire, mais c'est pas grave. Lâchez-vous mes amis !...


 Conclusion

Merci de partager vos modifications/optimisations.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

16 mars 2009 12:21:39 :
En application sur http://www.labotemplates.com/
16 mars 2009 12:24:56 :
En application sur http://www.labotemplates.com/
16 mars 2009 12:26:28 :
capture modifiée (visualisation dans contexte réel)

 Sources du même auteur

Source avec Zip CUSTOMISATION DE BUTTON TAGS AUTOMATIQUE
Source avec Zip MENU "DÉROULANT" CSS COMPATIBLE

 Sources de la même categorie

Source avec Zip CUSTOMISATION DE BUTTON TAGS AUTOMATIQUE par labotemplates
Source avec une capture MAQUETTE WEB par yacdj
Source avec Zip MENU DEROULANT VERTICAL/HORIZONTAL EN CSS par nery88
Source avec Zip MENU "DÉROULANT" CSS COMPATIBLE par labotemplates
Source avec Zip Source avec une capture WEB THEME NATURE , HIVER ET HIGH-TECH par qbasic

Commentaires et avis

Commentaire de metis15 le 16/03/2009 14:06:58 10/10

Nickel, même avec IE6, bravo !!

Commentaire de dadoo1 le 16/03/2009 16:18:33

pas mal du tout

Commentaire de edr le 19/03/2009 09:52:41

vraiment très bien

code propre et commenté !

la css aurait pu être optimisée et allégée, mais ce menu est top !

quel est le principe de csshover.htc ?


à publier peut-être aussi dans http://www.javascriptfr.com/

ENjOY,

++DigitalCoder

Commentaire de labotemplates le 19/03/2009 10:06:30

bonjour et merci pour ces gentils commentaires :)
Donc alors : le .htc (nan nan, c'est pas un smartphone) sert à palier un manque sur l'API d'IE6 qui ne sait pas gérer les pseudo class de type :hover, :focus, etc. sur certains éléments du DOM. Pour le cas présent, il s'agissait de pouvoir utiliser :hover sur des LI et DD. Voilà voilà.
Pour l'optimisation de la CSS, je pense que cette question vient du fait que j'ai découpé les notions de "background". C'est effectivement un peu plus long mais beaucoup plus fin en gestion. Et comme je ne suis pas la moitié d'un fainéant, j'ai adopté une structure HTML de type UL/LI > DL/DD > UL/LI. L'idée est de "casser" les héritages de class sur les UL et LI. Je ne sais pas si je suis bien clair sur ce coup là... :)
Je prends toute optimisation bien entendu, share your mind !

Commentaire de gr43 le 24/03/2009 13:41:01

Salut, l'esthétique est super sympa. Au niveau du code html et css il est sans doute possible de le réduire légèrement. IE6 ne gère pas les pseudo class de type :hover sauf pour les balises anchor, ce qui peut permettre d'éviter csshover.htc qui me semble-t-il n'est rien d'autre que du javascript.

Commentaire de edr le 24/03/2009 13:56:59

oui notamment les raccourcis css
cf >>
http://www.websiteoptimization.com/speed/tweak/shorthand/
http://www.websiteoptimization.com/speed/tweak/hex/
http://www.websiteoptimization.com/speed/tweak/css-optimization/

Commentaire de ninobeo le 30/03/2009 10:02:42

Salut, ce menu a l'air très sympa; mais je ne sais pas comment l'ouvrir? je ne suis pas du tout programmeur.
J'ai bien tenté de l'ouvrir via kompozer mais sans succès.

help!

Commentaire de labotemplates le 30/03/2009 12:00:18

Bonjour,
Je n'ai pas utilisé d'éditeur wysiwyg. Avec Pspad ou Notepad++ ça marche !

Commentaire de labotemplates le 27/04/2009 14:06:16

@gr43
Bonjour,
Effectivement IE6 gère les pseudo class de type hover mais pas sur les listes à puces, ce que le htc permet d'ajouter (et pas que sur les listes, TR, TD, etc. sont aussi concernés ce qui évite les lourds onmouseover/out sur des lignes par exeemple). En l'occurrence, la structure du menu ne permet pas de s'appuyer sur les balises <A> pour gérer l'affichage et le masquage des sous menus.
Je vais tenter d'ailleur d'ajouter la prise en charge du focus sur les éléments de sorte que le menu reste utilisable sans souris.

Commentaire de us_30 le 21/05/2009 18:27:21 10/10

Beau code, en tout cas... bravo.

Amicalement,
Us.

Commentaire de quentino2 le 29/07/2009 16:06:44

Salut labotemplates,
Merci pour ton menu, je l'utilise aujourd'hui c'est top.
Je bidouille du code html/css/js selon mes besoins mais je ne suis pas expert.

Je renontre un soucis sur ton menu, lorsqu'il y a beaucoup de menu de niveau 1 et que la fenêtre du navigateur est trop petite, les boutons se mettent à se chevaucher. Il faudrait trouver un moyen de les fixer, ce qui demanderait donc de scroller vers la droite pour voir tout les menus, mais ça serait plus propre.

Peux tu résoudre ce problème ?
Je te remercie,
Q

Commentaire de manu7772 le 09/08/2009 17:18:18 10/10

Superbe ! Je vais essayer de faire un utilitaire pratique en PHP pour créer les menus automatiquement à partir  d'un simple tableau ou fichier texte... à suivre.

Commentaire de labotemplates le 07/09/2009 14:44:22

@manu7772

Hello hello. Si ça t'intéresse la source qui le construit existe déjà. Pour ma part, je suis parti d'un xml tout bêta. Mail moi sur le site et on se contacte. Cdlt, LBT

Commentaire de erick123456 le 09/09/2009 09:15:31

tout simplement bravo

Commentaire de tuno le 20/11/2009 15:09:06 10/10

Très beau travail, je m'en inspire pour un site en cours de développement. S'il fonctionne à merveille sous Mozilla, IE8 n'en veut pas :-(
Rencontrez-vous ce problème ou est-ce moi qui ai zappé quelque chose ?

Commentaire de labotemplates le 20/11/2009 15:34:01

à Tuno.
Vive IE8 donc... je l'ai implémenté dans mon site de tests, il semble fonctionner avec l'ajout de la balise meta suivante :
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

J'avoue, il faudrait le rendre compatible sans ça...

Commentaire de tuno le 20/11/2009 16:24:32

Ca ne marche pas mieux :-(
Je fais des recherches de mon côté aussi...

Commentaire de labotemplates le 03/12/2009 07:46:46

Donc, pour info, il s'agissait de la définition du DOCTYPE... C'est pointilleux ces petites choses :)

Commentaire de lexussPro le 14/12/2009 01:19:11

merci

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,468 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales