Créer un menu déroulant en CSS

Nous avons l'habitude de naviguer sur des applications bureautiques via des menus, des menus toujours des menus ! Et ceux ci ont finis par s'utiliser sur internet. Nous allons ainsi apprendre à réaliser un menu déroulant en utilisant uniquement CSS. Aller c'est parti !

La structure (X)HTML

Dans un premier temps, il nous faut créer un structure de notre menu. La meilleure solution pour mettre en place un menu est d'utiliser une liste parce qu'un menu se comporte comme une liste : il possède des items qui peuvent eux même contenir un sous menu. Pour ceux qui ne se souviennent plus bien, voici comment se construit une liste : <ul> permet de construire une liste non ordonnée, <ol> une liste ordonnée (nous n'utiliserons pas la liste ordonnée, il s'agit juste d'un rappel) et <li> un item de liste. Maintenant ce petit rappel de fait, il nous faut créer notre menu uniquement avec (X)HTML. Allez, c'est parti !

<ul class="menu">
   <li>
      <a href="#">Option 1</a>
      <ul>
         <li>
            <a href="#">Sous option 1</a>
            <ul>
               <li><a href="#">Sous sous option 1</a></li>
               <li><a href="#">Sous sous option 2</a></li>
               <li><a href="#">Sous sous option 3</a></li>
            </ul>
         </li>
         <li><a href="#">Sous option 2</a></li>
         <li><a href="#">Sous option 3</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Option 2</a>
      <ul>
         <li><a href="#">Sous option 1</a></li>
         <li><a href="#">Sous option 2</a></li>
         <li><a href="#">Sous option 3</a></li>
      </ul>
   </li>
</ul>

Je vous laisser adapter cet exemple à vos besoins

Remarquez tout de même le fait que la liste mère possède un attribut class="menu", ceci va nous servir pour la prochaine étape : le CSS !

Un peu de mise en forme

Maintenant que notre liste est crée, nous allons nous charger de la rendre plus pratique à utiliser avec des gros boutons et tout. Voici le CSS que vous devrez insérer dans votre page :

/* Propriétés de chaque liste du menu */
ul.menu, ul.menu ul {
   width:140px;
   padding:0px;
   margin:0px;
   list-style:none; /* On retire les puces */
}

/* Propriété de chaque item du menu */
ul.menu li {
   padding:0px;
   margin:0px;
   position:relative;
   background-color:#DDDDDD;
   border:1px solid #000000;
   border-left:6px solid #0055FF; /* Un petit trait bleu sur la gauche */
}
ul.menu li:hover {
   background-color:#BBBBBB; /* On change la couleur de fond quand la souris est sur l'item */
}

/* Propriétés de chaque lien du menu */
ul.menu li > a {
   color:#000000;
   padding:5px;
   display:block;
   text-decoration:none;
}

/* Chaque sous liste du menu doit etre décalé par rapport à la précédante */
ul.menu ul {
   position:absolute;
   top:-1px;
   left:133px;
}

Gilbert, déroule !

Et oui, n'avions nous pas dit que nous réaliseront un menu déroulant. Il ne nous manque plus alors que la partie qui permet de faire dérouler notre menu. Le principe est simple, il nous suffit de masquer les sous menus et de les rendre visible quand l'utilisateur pointe sa souris sur l'item parent. Pour cela je vous invite à ajouter les propriétés CSS suivantes :

/* Chaque sous liste du menu doit etre invisible */
ul.menu ul {
   display:none;
}
			
/* Chaque sous liste s'affiche lorseque la souris pointe sur l'item auquel elle appartient */
ul.menu li:hover > ul {
   display:list-item;
}

Le rendu final

Et voilà, nous avons terminer notre super menu CSS déroulant, pour visionner le rendu final, cliquez sur le lien ci dessous :



Pour toute question, n'hésitez pas à laisser un commentaire ou directement à m'envoyer un message sur mon profil

Commentaires