Dans ce tutoriel, nous allons voir comment créer un menu déroulant en pure CSS3. Il existe déjà de nombreux tutoriels sur le sujet mais la plupart d'entre eux utilisent la technologie JQuery pour obtenir l'effet déroulant. Il est donc possible de s'en passer et nous allons voir comment et constater que c'est même bien plus simple.
Nous allons tout d'abord commencer par créer la structure HTML, puis nous ajouterons le css pour styliser notre menu et obtenir l'effet déroulant.
La structure HTML
La première étape consiste à créer d'abord une liste < ul > avec quelques < li > < /li > à l'intérieur. Cela devrait ressembler à ça :
<nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> </ul> </nav>
Ensuite, nous sélectionnons une des balises < li > < / li > à laquelle nous ajoutons une nouvelle balise < ul > < /ul > avec quelques éléments à l'intérieur pour créer notre menu déroulant.
<nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Contact</a></li> <!-- Début du menu déroulant --> <li><a href="#">Menu1</a> <ul> <li><a href="#">Drop 1</a></li> <li><a href="#">Drop 2</a></li> <li><a href="#">Drop 3</a></li> </ul> </li> <li><a href="#">Menu2</a></li> </ul> </nav>
Le CSS
Maintenant que nous en avons terminé avec la structure HTML (nous avons notre liste prête), tout ce que nous avons à faire est d'ajouter le css. Pas de difficultés majeures ici mais pour mieux comprendre le CSS, faisons attention aux commentaires:
li {
list-style:none !important;
color:#FFF;
padding:10px;
font-size:20px;
text-decoration:none;
}
nav ul {
background-color:#64abfb;
padding:0;
margin:0;
}
nav ul li {
list-style: none;
line-height:44px;
float:left;
background-color:#64abfb;
}
nav ul li a {
color:#FFF;
padding:10px;
font-size:20px;
text-decoration:none;
}
li a:hover {
border-bottom:3px #FFF solid;
}
nav ul li ul { display:none; } /* Rend le menu déroulant caché par défaut */
nav ul li:hover ul { /* Affiche la dropNav au survol de la souris avec la class .drop */
z-index:99999;
display:list-item !important;
position:absolute;
margin-top:5px;
margin-left:-10px;
}
nav ul li:hover ul li {
float:none;
}
Comment ajouter un symbole au menu déroulant ?
Pour ajouter une flèche (p.ex) au menu déroulant, il suffit d'indiquer: li > a:after {content: ' »';}
Et pour l'afficher seulement là où il y a une liste déroulante, il faut utiliser li>a:only-child:after { content: ”; }
li > a:after { content: ' »'; } /* Changer ce afin de changer le symbole du menu déroulant */
li > a:only-child:after { content: ''; }
En conclusion
Comme nous venons de le voir, on peut très bien se passer de Javascript pour réaliser un menu déroulant. Cette solution souple et simple permet néanmoins d'afficher un résultat très propre visuellement.
A vous d'essayer maintenant !
