Menus déroulants utilisant CSS

Quiconque a déjà créer des menus déroulants, familiers avec la façon dont une grande partie du script est nécessaire pour cela. Pendant ce temps, en utilisant un code HTML bien structuré et les règles CSS-simple, vous pouvez créer un joli menu déroulant qui est facile à changer et ajouter, et en même temps il va travailler dans une variété de navigateurs, y compris Internet Explorer. Et la chose la plus importante pour vous, amateurs de code "pur" - pas JavaScript! (En fait, un petit script encore nécessaire, mais pas pour ce que vous pensez.)

Voici un exemple de 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. Ce mieux est d'utiliser une liste à puces, qui abrite le sous-menu apparaissant comme une liste dans sa liste mère articles. Il semble technique et confus? En fait, il 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>

Ici, il est: un simple code HTML est disponible et facilement modifiable.

Nous dirigeons la beauté

Regardez les exemples ci-dessus. Vous verrez une liste assez ennuyeux d'articles. Et je vous promets que ce sera bien! Ajoutons un peu de style.

La première étape consiste à supprimer le retrait et les marqueurs dans la liste à puces et de définir la largeur des éléments de menu.

ul {margin: 0; padding: 0; list-style: none; largeur: 150px; }

Maintenant, nous devons définir la position des éléments de la liste. Heureusement, ils sont disposés verticalement par défaut, qui est ce que nous avons besoin. Cependant, nous avons besoin de définir la valeur de la position en tant que parent, et parce que nous aurons besoin de positionner absolument les sous-menu relatif.

ul li {position: relative; }

Prenez par des sous-menus. Nous voulons que chaque sous-menu apparaisse à droite du menu parent dans l'instant sur ce point le curseur.

li ul {position: absolute; gauche: 149px; top: 0; display: none; }

En utilisant les attributs de "gauche" et "top", nous ne pouvons absolument positionner chaque sous-menu dans l'élément de menu parent. Vous remarquerez que je mets l'attribut «gauche» de la valeur à 149px (un pixel est plus petite que la largeur de l'élément parent), il permet le sous-menu se chevauchent le menu principal sans créer une double bordure. (Comprendre ce que je veux dire, un peu plus tard.)

Nous avons également besoin d'affecter l'attribut "display" valeur "none", puisque nous ne voulons pas voir le sous-menu lorsque la page s'ouvre.

Eh bien, nous avons maintenant un cadre , mais il semble encore peu attrayante. Demandons styles pour référence.

ul li a {display: block; text-decoration: none; color: # 777; fond: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }

J'ai appliqué le style des liens à votre goût, mais vous pouvez facilement changer ceux que vous aimez. Il est important d'attribuer l'attribut "bloc" "affichage" de la valeur, parce que nous voulons que chaque lien occupait tout l'espace prévu à l'intérieur de l'élément de liste contenant.

Donc, il semble un peu mieux , bien que les utilisateurs d'Internet Explorer pour Windows vous ne pouvez pas d' accord. Malheureusement, IE Win comprend les pauses entre les liens dans notre code HTML magnifiquement décoré comme un espace vide. De cela, vous pouvez voir dans l'IE, dont les références ne sont pas étroitement adjacentes l'une à l'autre. Cependant, ce bug peut être contourné IE.

/ * Fix IE. Masquer dans IE Mac \ * / * html ul li {float: left; } * Html ul li a {height: 1%; } / * Fin * /

Nous avons appliqué le truc de Holly Hack qui cache ces règles de tous les navigateurs, mais IE Win. Excellente. Remarque hauteur que la règle a été ajoutée: 1%. Malheureusement (encore!), Aux prises avec une erreur, nous vytknulis à un autre, pour faire face à laquelle vous souhaitez définir une valeur pour l'attribut «hauteur», que les liens affichés comme éléments de niveau bloc.

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

ul {margin: 0; padding: 0; list-style: none; largeur: 150px; border-bottom: #ccc 1px solid; }

Tout allait bien, et maintenant tout le monde peut voir la belle, mais le menu qui ne fonctionne pas .

Faire fonctionner

Et maintenant - le plus amusant. Nous devons faire en sorte que le sous-menu apparaisse à un moment où le curseur est sur un élément de liste.

li: hover ul {display: block; }

Voila! Et ici , il est - de notre menu - en action.

"E-moi! Ça marche!" - Shouts quelqu'un de vous. - "Wow!"

D'accord, très bien, mais IE / Win sanglante a éclaté à nouveau toute la beauté - est pas prêt à faire ce qu'on lui dit. Il comprend: hover pseudo-classe est seulement pour <a> tag - de sorte que le li: hover, qui nous avons attaché l'apparition du sous-menu, il ne parle pas.

goutte IE JavaScript des sens de plomb (lignes de rupture marqués avec " '" - Ed.): 

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

Ainsi, les règles de vol stationnaire comme suit:

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

Nous avons également besoin de lier davantage le JavaScript avec notre liste principale, ajoutant ceci:

<Ul id = "nav">

Je l' espère, compte tenu de toutes les applications ci - dessus, vous pouvez tous voir une version simplifiée du menu actuel .

Sauter dans le menu IE5.01 pour Win

IE5.01 pour les utilisateurs Windows remarqueront est le menu saute autour lorsque vous survolez l'un des éléments de la liste. Le problème est facilement résolu en apportant des changements dans notre dernière astuce:

/ * Fix IE. Masquer dans IE Mac \ * / * html ul li {float: left; hauteur: 1%; } * Html ul li a {height: 1%; } / * Fin * /

bug mystérieux sixième version de IE ...

Tout en travaillant sur l'article, je trouve un bug étrange, qui, je pense, on observe que dans IE6. Pour "li a" besoin de mettre en arrière-plan, ou si le sous-menu déroulant sera plus (hauteur) que le menu réel parent, puis une partie de la référence sera tout simplement disparaître de l'écran avant même que vous pouvez cliquer sur eux. Étrange! Essayez de voir vous-même.

Créez votre propre menu

Voilà! Non contrairement à la méthode classique de créer de beaux menus déroulants horizontaux. Tout ce que vous devez faire - ajouter un peu de style à votre vol stationnaire, la création de votre menu. pour démarrer votre imagination, j'ai ajouté quelques coups dans le menu . Amusez-vous!