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