Tutoriel: faire un sous-menu avec 2 lignes de JQuery et un peu de CSS

Vous n’avez pas obligatoirement besoin de plugins JQuery pour faire un sous-menu qui apparait en « hover » au dessus d’un lien, 2 lignes de codes suffisent comme nous allons le voir !

Côté HTML, notre menu principal (id: « menu ») possède un premier niveau de liens (dans les <li> de class menu_li), une ou plusieurs de ses <li> peut posséder une liste à puces en guise de sous menu.
Mes <li> possédant un sous-menu doivent avoir une classe spécial qui servira en JQuery, dans mon exemple la class « menuLiWithSubMenu ».
Enfin, mes listes à puces servant de sous menu doivent aussi posséder une class, pour la même raison, dans mon exemple: « subMenu ».

HTML:

...
</div>
<ul id="menu">
 <li class="menuLi menuLiWithSubMenu">
   <a href="?page=techniques">Techniques</a>
   <ul>
     <li><a href="?page=technique1">1 - Choix du bois</a></li>
     <li><a href="?page=techniques">2 - Ecariçage & taillage</a></li>
     <li><a href="?page=techniques">3 - Polissage du bois</a></li>
     <li><a href="?page=techniques">4 - Assemblage des rondins</a></li>
   </ul>
 </li>
 <li class="menuLi"><a href="?page=realisations">Realisations</a></li>
 <li class="menuLi"><a href="?page=me-trouver">Me Trouver</a></li>
</ul>
<div id="content">
...

Côté CSS, j’ai mis en forme mon #menu et ses liens principaux, mais je vais plus m’attarder sur le sous-menu:

CSS:

#menu
{
 list-style-type: none;
 background-color: #336228;
 height: 23px;
 width: 350px;
 overflow: hidden;
 line-height: 23px;
 padding: 0px;
 margin: 0px;
}

#menu .menuLi
{
 float: left;
}

#menu .menuLi a
{
 text-decoration: none;
 color: #FFF;
 font-size: 10px;
 font-weight: bold;
 text-transform: uppercase;
 display: block;
 height: 23px;
 padding: 0px 15px 0px 15px;
}

#menu .menuLi a:hover
{
 background-color: #479c33;
}

.subMenu
{
 position: absolute;
 z-index: 100;
 list-style-type: none;
 margin: 0px 0px 0px 0px;
 padding: 0px 0px 0px 0px;
 background-color: #818181;
 border-top: 4px solid #336228;
 display: none;
}

Voyons mon sous-menu représenté par la class « subMenu »: je lui ai mis une position absolute, pour qu’il apparaisse en entier et qu’il ne prenne pas en compte les autres block qui l’entourent.

Un z-index de 100 pour qu’il soit au dessus de tous les autres éléments de ma page ! Enfin, un display: none; pour qu’il soit caché au chargement de la page dans le navigateur.

Dernière étape, l’ajout du JQuery (sans oublier d’inclure la librairie si ce n’est pas fait !):

JQuery:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {

   $(".menuLiWithSubMenu").hover(
     function(){
       $(this).find(".subMenu").stop().fadeTo('fast', 1).show();
     },
     function(){
       $(this).find(".subMenu").stop().hide();
     }
   );

 });
</script>

Traduction du script: lorqu’on passe au dessus d’une <li> de class « menuLiWithSubMenu », on fait apparaître son sous-menu de class « subMenu » !
On le masque si on sort du « hover ».

Et voila une petite démo en live, passez votre souris au dessus du lien « techniques » ou « galerie »: démo.