Prenons donc les choses par le menu ! Le menu, un élément déterminant dans nos sites. Il donne les clés pour naviguer quelque soit le device, et contribue à rendre lisible votre site et votre architecture de contenus. Voyons quelques propositions de menus bien pensés, en terme de code et d’intégration front, afin de trouver à travers ces exemples, inspiration et solutions utiles en terme de code.
1 – Responsive Slide Toggle Menu
Merci à Philippe pour partager ce menu efficace avec le script menu-opener.js. Nous avons là une mise en pratique du flexbox pour le menu – navigation : donc responsive.
Voir la ressource du responsive Slide Toggle Menu
2 – One Page Navigation CSS Menu
Pour Alberto Hartzet, le menu se place en barre latérale, et via un pictogramme cliquable on accède à une nouvelle page. Effet slider très bien intégré dans l’interface avec une animation subtile sur le picto cliqué. Plutôt sympa pour un site ne one page.
Voir la ressource du One Page Navigation Menu
3 – Un pur menu responsive
Ce menu a la particularité d’être responsive. Il porte donc en largeur réduite pour mobile le menu burger. L’intérêt est de bien voir le code : pas de JQuery ! C’est en utilisant un media Query en CSS que l’on peut agir sur ce qui s’affiche ou pas, tout simplement ! Merci à Daniel Ibbe.
Voir la ressource du Pure CSS menu
4 – Multi-Level Menu
Un menu simple en effet slide pour les liens de second niveau, et très efficace. Avec une animation efficace et élégante, ce menu permet d’afficher plusieurs niveaux de navigation. Surtout, l’intérêt peut se porter sur la possibilité donnée de garder une vision de la navigation par un breadcrum qui est lui-même actif.
Voir la ressource du Multi-level Menu
5 – Page Stack Menu
Un menu qui se construit sur un effet de pages en épaisseur
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.
Voir la ressource du Page Stack Menu
6 – The Gooey Menu
Merci à Lucas Bebber qui nous offre là on pas 1 mais 4 menus, du moins 4 versions d’un menu
Voir la ressource the Gooey Menu
7 – Mega-Site navigation
Pour finir, un mega menu complet sur plusieurs types de contenus (selon l’onglet), et avec animations CSS. Le JQuery n’intervient que pour l’ajout de classes, et pour les media-queries en large. Plutôt intéressant dans sa structure, ce menu
Voir la ressource Mega-Site Navigation
