Menu déroulant

Date d'inscription: 25/04/2011

Voilà une solution aux menus à rallonge. Un menu déroulant! cheers

Un exemple

On commence par du HTML

Alors ce menu est constitué de listes que l'on déclare avec des balises ul. On donne à cette balise un identifiant css que l'on appelle "menu" (on en verra l'utilité plus tard). Chaque lien est un élément de liste affiché par la balise li.
On a donc:

Code:

Maintenant on va s'occuper des sous-liens. L'idée c'est de mettre une liste dans une liste. Donc dans chaque balise li on va mettre une balise ul et les li qui vont avec. Voilà ce qu'on a:

Code:

La partie HTML est finie. C'était court non? Wink

Le CSS sinon ça marche pas!

Le problème c'est que là votre menu bah... il n'est pas déroulant. Euuuuh

Donc grâce au css on va retrouver l'effet voulu.

Tout d'abord on s'occupe de notre ul menu:

Code:

#menu{
}

*On va enlever les points devant les éléments de la liste menu

Code:

list-style-type:none;

*On centre le texte dans la liste

Code:

text-align:center;

On a donc:

Code:

#menu{
list-style-type:none;
text-align:center;
}

Ensuite on s'occupe des liens de la liste "menu":

Code:

#menu li {
}

*On s'occupe du flottement des éléments qui, tel qu'il est aligne verticalement les liens.

Code:

float:left;

*On change la couleur de fond.

Code:

background-color:black;

*On règle la largeur de chaque élément.

Code:

width:200px;

*On donne les priorités de superpositions.

Code:

z-index:999;

Ce qui donne:

Code:

#menu li {
float:left;
background-color:black;
z-index:999;
width:200px;
}

Là on personnalise les liens à proprement parlé (sous-liens compris).

Code:

#menu li a {
}

*On affiche le tout en bloc.

Code:

display:block;

*On donne les priorités de superpositions.

Code:

z-index:999;

Là on fait quelques personnalisations:
*On paramètre la couleur des liens.

Code:

color: #FFFFFF;

*On enlève le soulignement des liens

Code:

text-decoration:none;

*On règle l'écart entre le texte et le bord:

Code:

padding: 2px;

Résultat:

Code:

#menu li a {
z-index: 999;
display:block;
color: #FFFFFF;
text-decoration:none;
padding: 2px;
}

On peut également changer la couleur des liens au survol comme ceci:

Code:

#menu li a:hover {
color: #CCCCCC;
}

Maintenant on passe à la seconde liste.

*On la passe en position absolute pour qu'elle ne bouscule pas les autres éléments en "s'ouvrant":

Code:

position:absolute;

*On masque la seconde liste par défaut:

Code:

display:none;

*On enlève le décalage:

Code:

padding:0;

*Ainsi que les petits points devant les éléments de liste:

Code:

list-style-type:none;

Voilà ce qu'on obtient:

Code:

#menu li ul {
position:absolute;
display:none;
padding:0;
list-style-type:none;
}

Et là on affiche la seconde liste quand on survole l'élément à laquelle elle appartient:

Code:

#menu li:hover ul {
display:block;
}

Dernier petit souci: à cause du float:left précédent, les éléments sous-liens s'alignent horizontalement. On remet donc le flottement à l'état normal:

Code:

#menu li:hover ul li {
float:none;
}

Voilà c'est fini!!!!

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]