Menu déroulant

11.01.2014

Pour suive ce tutoriel, vous avez besoin d'un minimum de connaissance en HTML et en CSS, nous n'utiliserons pas de JS.

HTML

On va créer notre menu sous la forme de listes imbriquées. La première liste contiendra les titres visibles, et les sous-listes seront les onglets visibles au survol.
1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS

2- Créez votre première liste (les titres visibles)

<div id="menu_deroulant">
<ul>
<li>
Titre 1
</li>
  <li>
Titre 2
  </li>
  <li>
Titre 3
  </li>
</ul>
</div>

3- Enfin, créez vos sous listes qui apparaitrons au survol

<div id="menu_deroulant">
<ul>
<li>Titre 1
<ul>
<li> Onglet 1 </li>
<li> Onglet 2 </li>
<li> Onglet 3 </li>
</ul>
</li>
  <li>Titre 2
<ul>
<li> Onglet 1 </li>
<li> Onglet 2 </li>
<li> Onglet 3 </li>
</ul>
  </li>
  <li>Titre 3</li>
</ul>
</div>

4- N'oubliez pas d'ajouter vos liens

<div id="menu_deroulant">
<ul>
<li>Titre 1
<ul>
<li> <a href="#">Onglet 1</a> </li>
<li> <a href="#">Onglet 2</a> </li>
<li> <a href="#">Onglet 3</a> </li>
</ul>
</li>
  <li>Titre 2
<ul>
<li> <a href="#">Onglet 1</a> </li>
<li> <a href="#">Onglet 2</a> </li>
<li> <a href="#">Onglet 3</a> </li>
</ul>
  </li>
  <li><a href="#">Titre 3</a></li>
</ul>
</div>

CSS

Ne modifiez pas le code suivant, il permettra à votre menu de fonctionner correctement.

#menu_deroulant ul {
margin:0;
padding:0;
list-style-type:none; }
#menu_deroulant li {
float:left; }
#menu_deroulant li:hover ul li {
float:none; }
#menu_deroulant ul li ul {
display:none; }
#menu_deroulant ul li:hover ul {
display:block;}
#menu_deroulant li ul {
position:absolute;
z-index: 10; }

Passons maintenant à la personnalisation :

La "barre" contenant vos titres visibles.

#menu_deroulant{
height: Xpx; /*définissez sa hauteur*/
propriété : valeur; /*personnalisez*/
}

Le code suivant correspond à vos titres visibles.

#menu_deroulant ul li a,
#menu_deroulant ul li {
display:block;
propriété : valeur; /*personnalisez*/
}

Code pour les onglets visibles au survol.

#menu_deroulant ul li ul li a,
#menu_deroulant ul li ul li{
display:block;
propriété : valeur; /*personnaliser*/
}

Placement dans l'en-tête

Mettez votre HTML dans un module simple. Puis modifier votre id dans le css de la manière suivante :

#menu_deroulant{
height: Xpx; /*définissez sa hauteur*/
propriété : valeur; /*personnalisez*/
position: absolute;
top: Xpx ; /*position par rapport au haut de la page*/
left: Xpx; /*position par rapport au bord gauche de la page*/
}

"position: absolute" rend votre menu indépendant par rapport aux autres éléments de la page. Déplacez le ensuite en changeant les valeurs de "top" et "left"

Pour plus d'information, je vous renvoie à l'article suivant :
=> http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132