Menu déroulant responsive et animé

Cela fait penser à du Javascript non?

En effet, quand on dit "animation" on pense systématiquement "Javascript". Depuis plusieurs années c'était ce langage qui permettait de créer les animations et même d'appliquer du design responsive à certains éléments. Mais ce temps là est révolu.

Menu déroulant avec HTML et CSS seulement

CSS3 a apporté une large collection de styles évolués comme les transitions, les animations, les média queries, les flexbox... Il est donc désormais possible de créer des animations, qui n'ont rien à envier au Javascript, avec CSS seulement.

Dans notre astuce nous allons créer un menu de navigation responsive. Sur un écran étroit, comme celui de smartphones ou de tablettes, le menu se rétracte et c'est seulement quand le visiteur le souhaite qu'il peut le dérouler.

Dans cet exemple encore on aura besoin de l'astuce de la balise LABEL associée au checkbox que nous avons vu précédemment.

Passons à la pratique