Ressources du dimanche (09) : les menus en front-end

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

Responsive Slide Menu pour le blog de Catepeli

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

One Slide Navigation CSS Menu pour le blog de Catepeli

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

Capture du Pure Menu CSS de Daniel Ibbe

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

Multi Level Menu pour le blog de Catepeli

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

Le menu page Stack pour le blog Catepeli

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

Le menu Gooey poru le blog de Catepeli

 

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

Mega menu pour le blog de Catepeli

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Categories:
Tags:
Date:
  • 06/12/2015
Share:
%d blogueurs aiment cette page :