0
Un menu qui s'ouvre au survole en HTML et CSS.

Type : Code - Posté le
Un menu qui s'ouvre au survole en HTML et CSS.

Bonjour à toutes et à tous !

Aujourd'hui, je vais vous présenter un code permettant de faire un menu 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


Sans plus attendre, passons au code !

Tout d’abord posons les bases qui sont celles-ci :

Code source ( Copier )

<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>


Et ensuite, ajoutons du style sur ces éléments :

Code source ( Copier )

<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>


Vous pouvez ensuite optimiser votre style comme vous le souhaitez.

Code final sans les commentaires, avec ma petite touche :

Code source ( Copier )

<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>
Afficher le résultat


Bien sûr, je n'ai pas donné de design "propre" au menu, je considère que c'est à vous de le faire :)

Voilà, c’est la fin.

J'espère que cet article vous aura aidé, et sur ce,

Je vous dis à bientôt.

Merci à @_Goodword pour la correction de l'article.

Poster un commentaire