Un menu multi-niveaux en full css et responsive

Un menu multi-niveaux en full css et responsive

menu-responsive

Il est tout à fait possible de créer un menu de navigation responsive à deux niveaux (ou même plus) sans utiliser JavaScript, notre solution sera du full CSS.

Pas besoin pour cela d’allonger le temps de chargement de la page en utilisant le framework Bootstrap.Un peu de media-queries , plus un peu de pseudo-classe CSS suffiront.

La démonstration sera visible sur github.

La structure HTML

La structure HTML sera comme suit :

Les deux premiers liens <a> seront utilisés pour cacher et afficher le menu sur mobile.

Techniquement on utilisera la pseudo-classe target liée à l’ancre (#nav) pour gérer le déploiement du menu réduit (ici pour une résolution inférieure à 720px) à partir d’un événement click.

Le CSS

Le code SASS(SCSS) pour gérer l’affichage:

Puis on va jouer un peu avec les media query dans la classe navigation-primary  pour l’affichage et la gestion du menu réduit (vu que notre menu sera responsive) :

La pseudo-classe target permettra facilement de déployer le menu sans javascript sur support mobile au déclenchement de l’événement click sur les petits écrans (vu que hover ne marche pas sur device mobile).

Enfin, pour une ré-utilisabilité de notre code, nous avons séparé le thème et les fonctionnalités.

Voila le skin CSS utilisé dans la démonstration:

Une réponse à “Un menu multi-niveaux en full css et responsive”

  1. nada

    Je vous remercie, je vous cherchais aussi bien comme tout, mais beaucoup d’entre eux non responsiv au site Merci effectivement

    Répondre

Répondre