contact@luc-mergault.fr

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

Je partage à travers ce blog mes projets et ma passion pour l'informatique en général.

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

0
(0)

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


Informations
Début de réalisation : 13 Avril 2014
Fin de réalisation : 14 Avril 2014

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>

Mon menu
Lien #1
Un Lien #2
Lien #3
Un autre Lien #4
Lien #5

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.

  • Bitcoin
  • Ethereum
  • Binance coin
  • MetaMask
Scan to Donate Bitcoin to bc1qrunuqqs7e8e5x7lctmgflvde8claupv44qa9fg

Soutenez moi en envoyant des Bitcoin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Bitcoin 😃

Scan to Donate Ethereum to 0x81D56c63Df07ef938425e53185984DC5670E206C

Soutenez moi en envoyant des Ethereum !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Ethereum 😃

Scan to Donate Binance coin to bnb18dy3mv3f6y7h4uems5d8emn8g7zgfq7vlslkpk

Soutenez moi en envoyant des Binance coin !

Scannez le QR code ci-dessous ou copiez l'adresse suivante pour me soutenir en envoyant des Binance coin 😃

Donner avec MetaMask

Si vous utilisez Metamask, vous pouvez me soutenir très simplement en cliquant sur ce bouton !

Donnez une note à cet article 😉

Note moyenne 0 / 5. Nombre de vote : 0

Pas encore de note, soyez le premier à donner une note !

Merci ! Partage cet article !

Je suis désolé que cet article ne te plaise pas

Améliorons cet article !

Dis moi ce que je peux améliorer !

 

Aucun commentaire

Ajoutez votre commentaire