Langage Informatique: créer un menu horizontal déroulant avec CSS et jQuery

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 .

Télécharger le modèle

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>

et VOILA , c'est tous :)
pour l'organisation des codes HTML et CSS et jQuery veillez télécharger le modèle

Langage Informatique

Chercher

créer un menu horizontal déroulant avec CSS et jQuery

la structure HTML du menu

les styles CSS

le jQuery pour réaliser le mouvement

2 commentaires :

Formulaire de contact