Un menu déroulant en HTML5 et CSS3 (sans javascript)
J'ai vu cette méthode magique sur le Web, je la trouve élégante et ultra-légère et l'ai tout de suite adoptée. Elle est uniquement à base de CSS. Son secret est l'utilisation d'un
input
de type checkbox
cachée pour dérouler le menu.
Une démonstration
Le principe
Il s'agit de créer un input
de type checkbox
caché précédé de son label
visible.
En effet, lorsqu'un visiteur clique sur le label, miraculeusement il coche/décoche la checkbox
sur tous les navigateurs.
Ensuite avec un peu de css
et le sélecteur :checked
on affichera le bloc souhaité lorsque la checkbox
est cochée.
<div id="my-menu"> <!-- Le label --> <label for="toggle-block">LABEL A CLIQUER</label> <!-- La checkbox que je choisis cochée au démarrage --> <input id="toggle-block" name="toggle-block" type="checkbox" checked /> <!-- Le bloc à afficher --> <div id="my-block">Mon bloc à afficher</div> </div>
Et pour le code css, on utilise une sélecteur #toggle-block:checked + #my-block
:
#my-menu{ background-color: #e95325; color: #fff; text-align:center; width: 250px; } #my-menu label{ cursor:pointer; } /* le bloc n'est pas visible lorsque la checkbox n'est pas cochée */ #my-block{ display: none; line-height:100px; border: 1px dotted #fff; margin:2px; } /* le bloc est visible lorsque la checkbox est cochée */ #toggle-block:checked + #my-block{ display: block; }
Résultat
Les transitions
Sur le menu de la démonstration, j'ai ajouté des effets avec les transitions CSS.
On ne peut pas faire de transition avec l'attribut css display
. Il faut des attributs quantifiables comme height
, font-size
, width
….
Ici, je joue avec les attributs opacity
et max-height
.
Le css devient alors :
/* ..............*/ /* le bloc n'est pas visible lorsque la checkbox n'est pas cochée */ #my-block{ max-height: 0px; opacity: 0; line-height:100px; border: 1px dotted #fff; margin:2px; transition: all 1s; } /* le bloc est visible lorsque la checkbox est cochée */ #toggle-block:checked + #my-block{ max-height: 300px; opacity: 1; transition: all 1s; }