Créer un menu horizontal déroulant avec CSS et jQuery ~ Cour2

Il est important d'avoir dans votre site web un menu horizontal déroulant , cet outil vous permet d'organiser le contenu de votre site et faciliter bien la navigation pour les visiteurs .
je vous présente dans cet article la méthode comment crée un menu simple par les langages HTML / CSS en ajoutant quelques effets de jQuery .

la structure HTML du menu

il est très connue que les balises HTML réservées au menus sont <ul> et <ol> .
mais puisque on vas créer un menu déroulant , on va trouver des balises <ul> imbriqués . en gros la structure HTML est la suivante

<div id="menu">
<ul> 

<li><a href="#">lien principal 1</a> <!-- menu principale -->

  <ul>  <!-- menu secondaire -->
  <li><a href="#">lien secondaire</a></li>
  <li><a href="#">lien secondaire</a></li>
  <li><a href="#">lien secondaire</a></li>
  </ul>

</li>

<li><a href="#">lien principal 2</a>

  <ul>
  <li><a href="#">lien secondaire</a></li>
  <li><a href="#">lien secondaire</a></li>
  </ul>

</li>

<li><a href="#">lien principal 3</a> 

  <ul> 
  <li><a href="#">lien secondaire</a></li>
  <li><a href="#">lien secondaire</a></li>
  </ul>

</li>

<li><a href="#">lien principal 4</a> 

  <ul> 
  <li><a href="#">lien secondaire</a></li>
  <li><a href="#">lien secondaire</a></li>
  </ul>

</li>

<li><a href="#">lien principal 5</a> 

  <ul> 
  <li><a href="#">lien secondaire</a></li>
  <li><a href="#">lien secondaire</a></li>
  </ul>

</li>
</ul>
</div>

les styles CSS

premièrement en supprime les marges et les points de la balise <ul> .

#menu ul {
 padding:0;
 margin:0;
 list-style:none;
 position:relative;
}

on ajout la propriété float de valeur left pour au balises <li> pour que le menu soit horizontal .

#menu > ul > li {
 float:left;
 margin:0;
 padding:0;
 position:relative;
}

on s’intéresse maintenant au styles propre au liens <a> , j'ai fait des styles correspond au modèle téléchargé .
bien sure vous pouvez changer quelques propriétés ici pour créer votre style personnalisé .

#menu > ul > li > a {
   display:block;
   font:normal bold 14px tahoma;
   background:#3f4040;
   min-width:100px;
   text-align:center;
   padding:10px 15px 10px 15px;
   text-decoration:none;
   color:#FFF;
   border-top:4px solid #FFF;
   border-bottom:4px solid #00B4FF;
   transition:background 500ms,color 500ms,border-color 500ms;
}
#menu > ul > li > a:hover {
   background:#666;
   border-top-color:#00B4FF;
   color:#00B4FF;
}

le style CSS du menu secondaire est le suivant :
veillez remarquer qu'on a fait display:none , c'est important puisque le menu secondaire doit être invisible .

#menu > ul > li > ul {
   position:absolute;
   top:45px;
   left:0;
   display:none;
}

ce qui reste c'est le style des liens <a> dans les cases <li> du menu .

#menu > ul > li > ul > li > a {
   background:#666;
   display:block;
   font:normal normal 12px tahoma;
   padding:5px 10px 5px 10px;
   text-decoration:none;
   color:#FFF;
   border-bottom:1px solid #FFF;
   min-width:130px;
}
#menu > ul > li > ul > li > a:hover {
 background:#777;
}

le jQuery pour réaliser le mouvement

en peut maintenant avoir le menu déroulant en ajoutant un simple script jQuery , mais avant l'ajout du script il faut toujours faire l’appelle de la bibliothèque jQuery , cela ce fait en ajoutant cette ligne a l’intérieur de la balise<head>

<script src='http://code.jquery.com/jquery-latest.js'></script>

et le script qui réalise le menu est :

<script>
 window.onload = function(){
         $("#menu > ul > li").hover(
          function(){ $(this).find("ul").slideDown('fast'); } ,
  function(){ $(this).find("ul").slideUp('fast'); } );
 }
</script>