This page has been robot translated, sorry for typos if any. Original content here.

Menus déroulants utilisant CSS

Tous ceux qui ont déjà créé des menus déroulants connaissent le nombre de scripts requis pour cela. Pendant ce temps, en utilisant du code HTML bien structuré et de simples règles CSS, vous pouvez créer un joli menu déroulant qui est facile à modifier et à compléter, et en même temps, il fonctionnera dans une variété de navigateurs, y compris Internet Explorer. Et le plus important pour vous, les fans de code "propre" - pas de JavaScript! (En fait, un petit script est toujours nécessaire, mais pas du tout pour ce que vous pensiez.)

Voici un exemple du menu actuel

Créer un menu

La première et la plus importante étape dans la création de notre menu est la construction de sa structure. Il est préférable de le faire en utilisant une liste non numérotée dans laquelle sont placés des sous-menus agissant comme des listes dans les éléments de la liste parente. Est-ce que ce son est abstrait? En fait, c'est très simple:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">WebDesign</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">DomainNames</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul>

Voilà: un code HTML simple, accessible et facilement modifiable.

Amener la beauté

Regardez l'exemple ci-dessus. Vous verrez une liste plutôt ennuyeuse d'articles. Et je t'ai promis qu'il serait mignon! Ajoutons quelques styles.

La première chose à faire est de supprimer les indentations et les marqueurs dans la liste non numérotée, puis de définir la largeur des éléments de menu.

ul {marge: 0; rembourrage: 0; style de liste: aucun; largeur: 150px; }

Maintenant, nous devons définir la position des éléments de la liste. Heureusement, ils seront situés verticalement par défaut, ce dont nous avons besoin. Cependant, nous devons définir la valeur de la position comme relative, et tout cela parce que nous avons besoin de les positionner pour positionner le sous-menu.

ul li {position: relative; }

Nous prenons un sous-menu. Nous voulons que chaque sous-menu apparaisse à droite de l'élément de menu parent au moment où le curseur est sur cet élément.

li ul {position: absolue; gauche: 149px; en haut: 0; affichage: aucun; }

En utilisant les attributs "left" et "top", nous pouvons absolument positionner chaque sous-menu dans l'élément de menu de l'ancêtre. Vous remarquerez que j'ai mis l'attribut "left" à 149px (un pixel de moins que la largeur du point parent), cela permet au sous-menu de chevaucher le menu principal sans créer de double bordure. (Vous comprendrez ce que je veux dire, un peu plus tard.)

Nous devons également définir l'attribut "display" sur "none", car nous ne voulons pas voir le sous-menu lors de l'ouverture de la page.

Eh bien, nous avons maintenant un squelette , mais il semble toujours indéfinissable. Définissons les styles pour les liens.

ul li a {display: block; text-decoration: aucun; couleur: # 777; fond: #fff; rembourrage: 5px; bordure: 1px solide #ccc; border-bottom: 0; }

J'ai appliqué des styles aux liens à mon goût, mais ils peuvent facilement être changés à ceux que vous aimez. Il est important d'affecter la valeur "block" à l'attribut "display", car nous voulons que chaque lien occupe tout l'espace qui lui est alloué dans l'élément list qui le contient.

Cela semble donc mieux , même si les utilisateurs d'Internet Explorer pour Windows peuvent ne pas être d'accord avec vous. Malheureusement, IE Win comprend les sauts de ligne entre les liens dans notre code HTML magnifiquement conçu comme un espace vide. Pour cette raison dans IE, vous voyez que les liens ne correspondent pas étroitement les uns aux autres. Cependant, ce bug IE peut être contourné.

/ * Corrige IE. Masquer à partir de IE Mac \ * / * html ul li {float: left; } * html ul li a {hauteur: 1%; } / * Fin * /

Ci-dessus, nous avons appliqué l'astuce Holly Hack, qui masque ces règles de tous les navigateurs sauf IE Win. Super. Notez que la règle de hauteur a été ajoutée: 1%. Malheureusement (encore!), Luttant avec une erreur, nous sommes tombés sur un autre, pour lutter contre lequel nous devons définir une valeur pour l'attribut "height", de sorte que les liens sont affichés en tant qu'éléments de bloc.

Notez également que nous avons oublié de "fermer" le bloc de menu. Ajoutez une limite inférieure supplémentaire à chaque élément de la liste. Donc, voici la liste complète des styles pour ul:

ul {marge: 0; rembourrage: 0; style de liste: aucun; largeur: 150px; border-bottom: 1px solide #ccc; }

Tout s'est bien passé, et maintenant tout le monde peut voir un beau menu , mais qui ne fonctionne pas .

Faisons-le fonctionner

Et maintenant - le plus amusant. Nous devons faire apparaître les sous-menus au moment où le curseur est au-dessus de l'élément de la liste.

li: hover ul {display: block; }

Voilà! Et c'est ici - notre menu - en action.

"Yo-mine, ça marche!" l'un de vous criera. - "Ouah!"

Ok, bien, mais putain IE / Win a encore cassé toute la beauté - ne veut pas faire ce qu'il dit. Il comprend la pseudo-classe: planer seulement pour la balise <a> - donc li: hover, sur lequel l'apparence du sous-menu est liée, ne lui dit rien.

Une gouttelette de JavaScript amènera IE à la vie (le saut de ligne est marqué d'un " " symbole - Ed.):

  startList = function () {if 
 (document.all && document.getElementById) {navRoot = 
 document.getElementById ("nav");  pour (i = 0; i <navRoot.childNodes.length; i ++) { 
 node = navRoot.childNodes [i];  if (node.nodeName == "LI") { 
 node.onmouseover = function () {this.className + = "sur";  } 
 node.onmouseout = function () {this.className = this.className.replace » (" sur "," ");  }}}}} 
 window.onload = startList; 

Ainsi, les règles pour le vol stationnaire sont:

li: hover ul, li.over ul {display: block; }

Nous devons également associer JavaScript à notre liste principale, en ajoutant ceci:

<ul id = "nav">

J'espère, compte tenu de tout ce qui précède, chacun d'entre vous peut voir une version simplifiée du menu actuel .

Menu saut dans IE5.01 pour Win

IE5.01 pour les utilisateurs Windows remarquerez comment le menu saute lorsque vous survolez l'un des éléments de la liste. Le problème est facilement résolu en apportant des modifications à notre tour précédent:

/ * Corrige IE. Masquer à partir de IE Mac \ * / * html ul li {float: left; hauteur: 1%; } * html ul li a {hauteur: 1%; } / * Fin * /

Bug mystérieux de la sixième version d'IE ...

En travaillant sur l'article, j'ai découvert un bug étrange, qui, me semble-t-il, n'est observé que dans IE6. Pour "li a" vous devez définir l'arrière-plan, sinon si le sous-menu déroulant est plus grand (en hauteur) que le menu parent lui-même, alors certains liens disparaîtront simplement de l'écran avant que vous puissiez cliquer dessus. C'est étrange! Essayez de le voir vous-même.

Créez votre propre menu

C'est tout! Une méthode qui ne contredit pas les normes pour créer de beaux menus déroulants horizontaux. Tout ce que vous devez faire est d'ajouter quelques-uns de vos styles pour le vol stationnaire, en créant votre propre menu. pour donner un coup de pouce à votre imagination, j'ai ajouté quelques coups de plus dans le menu . Profitez!