Un menu qui s’ouvre au survole en HTML et CSS

Cet article est la reprise d’un article que j’avais écrit dans mes débuts, qui a pour but de présenter une façon de développer un menu déroulant en HTML et CSS.

Cet article est une archive du 19 Novembre 2015 ( En savoir plus ).

Bonjour à toutes et à tous !

Aujourd’hui, je vais vous présenter un code permettant de faire un menu en HTML qui s’ouvre au survol d’un élément.

Avant toute chose, sachez que cet article avait déjà été publié sur un de mes anciens sites, mais je trouvais intéressant de le re-poster ici.

Sans plus attendre, passons au code !

Tout d’abord posons les bases que voici :

<div class="mon-menu">
Mon menu<br />
<span>Lien #1</span>
<span>Lien #2</span>
<span>Lien #3</span>
<span>Lien #4</span>
<span>Lien #5</span>
</div>

Ajoutons ensuite du style sur ces éléments :

<style>
/*Nous allons mettre les span de la class "mon-menu"en display block, ce qui va permettre d’aligner les liens verticalements.*/
.mon-menu span
{
	display:block;
}
/*Nous allons maintenant limiter la taille maximale du menu à 20px, et masquer la barre de défilement ( Pour masquer les élément du menu ( Liens ) )*/
.mon-menu
{
	max-height:20px;
        overlow:hidden;
}
/*Une fois cela fait, on veut que lorsque la souris passe sur le menu, celui-ci s’affiche correctement*/
/*On va donc rappeler la class "mon-menu", en y ajoutant le pseudo-class :hover qui veut dire, quand la souris passe sur le menu*/
.mon-menu:hover
{
        /*On met le max-height à 100% ce qui aura pour effet de lui redonner sa taille de base*/
	max-height:100%;
        /*Puis on remet la barre de défilement en automatique.*/
        overflow:auto;
}
</style>

Il est ensuite possible d’optimiser le style des éléments comme vous le souhaitez.

Code final sans les commentaires & son résultat

<style>
.mon-menu span
{
	background-color:yellow;
	padding:6px;
	display:block;
	width:20%;
	margin:10px;
	border-radius:5px;
}
.mon-menu
{
	background-color:green;
	border:3px solid blue;
	max-height:18px;
        overflow:hidden;
}
.mon-menu:hover
{
	max-height:100%;
        overflow:auto;
}
</style>
<div class="mon-menu">
Mon menu<br />
<span>Lien #1</span>
<span>Lien #2</span>
<span>Lien #3</span>
<span>Lien #4</span>
<span>Lien #5</span>
</div>

A noter que je n’ai pas donné de design « propre » au menu, je considère ensuite que c’est à vous de le faire 😉

Voilà, c’est la fin.

En espérant que cet article ait pu vous aider un peu, n’hésitez pas à donner vos retours en commentaire, ou sur Twitter @Luluwebmaster

Je vous dis à bientôt.