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

Menus déroulants CSS

Tous ceux qui ont créé des menus déroulants savent combien de scripts sont nécessaires pour cela. En attendant, en utilisant un code HTML bien structuré et de simples règles CSS, vous pouvez créer un joli menu déroulant, facile à modifier et à compléter, qui fonctionnera simultanément dans de nombreux navigateurs, y compris Internet Explorer. Et la chose la plus importante pour vous, 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 consiste à construire sa structure. Pour ce faire, il est préférable d'utiliser une liste non numérotée contenant des sous-menus faisant office de listes dans les éléments de la liste parente. Sound abstruse? 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>

Le voici: un code HTML simple, accessible et facilement modifiable.

Induire la beauté

Regardez l'exemple ci-dessus. Vous verrez une liste assez ennuyeuse d'éléments. Et je vous ai promis qu'il sera mignon! Ajoutons quelques styles.

Commencez par supprimer les retraits et les marqueurs de la liste non numérotée, puis définissez la largeur des éléments de menu.

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

Nous devons maintenant définir la position des éléments de la liste. Heureusement, ils seront par défaut disposés verticalement, ce dont nous avons besoin. Cependant, nous devons définir la valeur de position comme relative, car nous devrons positionner le sous-menu de manière absolument relative.

ul li {position: relative; }

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

li ul {position: absolute; à 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 je règle l'attribut "gauche" sur 149px (un pixel de moins que la largeur de l'élément parent), ce qui permet au sous-menu de chevaucher le menu principal sans créer de double bordure. (Comprenez de quoi je parle un peu plus tard.)

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

Eh bien, nous avons maintenant un cadre , mais il semble toujours discret. Définissons les styles pour les liens.

ul li a {display: block; texte-décoration: aucun; couleur: # 777; background: #fff; rembourrage: 5px; bordure: 1px solide #ccc; bordure inférieure: 0; }

J'ai appliqué des styles aux liens qui vous plaisent, mais vous pouvez facilement les changer pour ceux que vous préférez. Il est important d'attribuer l'attribut "display" à l'attribut "display", car nous voulons que chaque lien occupe tout l'espace qui lui est réservé dans l'élément de liste qui le contient.

Cela semble donc déjà mieux , même si les utilisateurs d'Internet Explorer pour Windows peuvent ne pas être d'accord avec vous. Malheureusement, IE Win comprend que les sauts de ligne entre les liens de notre code HTML magnifiquement conçu constituent un espace vide. Pour cette raison, dans IE, vous constatez que les liens ne s'emboîtent pas l'un dans l'autre. Cependant, ce bug IE peut être contourné.

/ * Corrige IE. Hide from IE Mac \ * / * html ul li {float: left; } * html ul li a {hauteur: 1%; } / * End * /

Ci-dessus, nous avons appliqué l'astuce Holly Hack qui masque ces règles à tous les navigateurs sauf IE Win. Super Notez que la règle de hauteur a été ajoutée: 1%. Malheureusement (encore!), En luttant avec une erreur, nous l'avons mise en évidence par une autre, pour lutter contre la nécessité de définir une valeur pour l'attribut "height" afin que les liens soient 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 une liste complète des styles pour ul:

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

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

Faites que ça marche

Et maintenant - le plus amusant. Nous devons faire en sorte que les sous-menus apparaissent au moment où le curseur se trouve sur l'élément de la liste.

li: hover ul {display: block; }

Voila! Et le voici - notre menu - en action.

"Yo-mien! Ça marche!" - Quelqu'un va crier. - "Génial!"

Bien, bien, mais foutu IE / Win a encore brisé toute la beauté - ne veut pas faire ce qu'il a été dit. Il comprend la pseudo-classe: survoler uniquement pour la balise <a> - donc li: le survol auquel l’apparence d’un sous-menu est lié à nous ne signifie rien pour lui.

Une goutte de JavaScript donnera vie à IE (le saut de ligne est marqué d'un " » "- 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 + = "over";  } 
 node.onmouseout = function () {this.className = this.className.replace  (" sur "," ");  }}}}} 
 window.onload = startList; 

Donc, les règles pour le vol stationnaire sont les suivantes:

li: survoler ul, li.over ul {affichage: bloc; }

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

<ul id = "nav">

J'espère que, compte tenu de tout ce qui précède, vous serez tous en mesure de voir une version simplifiée du menu actuel .

Saute le menu dans IE5.01 pour Win

Les utilisateurs de IE5.01 pour Windows remarqueront comment le menu bascule lorsque vous survolez un élément de la liste. Le problème est facilement résolu en apportant des modifications à notre tour du passé:

/ * Corrige IE. Hide from IE Mac \ * / * html ul li {float: left; hauteur: 1%; } * html ul li a {hauteur: 1%; } / * End * /

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

En travaillant sur l'article, j'ai découvert un bogue étrange, qui, je pense, n'est observé que dans IE6. Pour "li a", il est nécessaire de 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, certains liens disparaîtront simplement de l'écran avant que vous ne puissiez cliquer dessus. Étrange! Essayez de le voir vous-même.

Créez votre menu

C'est ça! Une méthode non standard pour créer de beaux menus déroulants horizontaux. Tout ce que vous avez à faire est d’ajouter quelques-uns de vos styles de survol pour créer votre propre menu. Pour donner un coup de pouce à votre imagination, j’ai ajouté quelques petites touches au menu . Profiter!