Un menu déroulant (parfois appelé menu hiérarchique ou menu en cascade) sert à accéder directement à un niveau inférieur d’un site ou d’une rubrique d’un site, sans avoir à passer par une LHP (Local Home Page).

A l’origine, les menus déroulants étaient plutôt petits (gain de place à l’écran et encombrement limité), ils se déroulaient au rollover (pour faire l’économie d’un clic) et étaient constitués uniquement de texte en HTML (pas d’images)

Mais les menus déroulants ont pas mal évolué depuis quelques années, et pour refléter ces évolutions, voici un petit billet propose un rapide aperçu de ces évolutions. La déroulé du billet est "globalement chronologique" même si vous verrez que certains exemples présentés ne sont pas forcément anciens, c’est juste que le menu qui est utilisé correspond au type de menu dont je parle.

Les premiers menus déroulants

Au début, les menus déroulants étaient basiques, c'est-à-dire uniquement constitués de HTML (texte + couleur). Exemples : Batashop et Tiffany

Ils pouvaient posséder plusieurs niveaux d’arborescence comme sur le site de Renault

La mise en page quant à elle variait : menu vertical (Groupe Richemont) et horizontal (Habitat)

On devait utiliser beaucoup de Javascript pour développer ces menus et on ne parlait pas encore de mise en forme avec des CSS comme aujourd'hui.

Ensuite sont venus s’ajouter éléments graphiques

  • des pictos et des formes particulières (Decathlon)
  • certains titres n’étaient plus en HTML mais en image (on appelle ça des "images-titres") Office Depot ou les 3 Suisses. Cela permet de mieux mettre en valeur le niveau supérieur en utilisant des typos ou des formes particulières par exemple... et cela permet de conserver la souplesse du HTML pour les niveaux inférieurs.

Certains menus déroulant sont aussi développés tout en image ou tout en Flash

Entièrement en image avec Gap :

  • plus de contraintes liées à l’utilisation d’applats de couleur ou de typos HTML
  • mais les pages s’alourdissent
  • et cela devient plus laborieux pour traduire les textes des menus dans différentes langues (il faut avoir un logiciel de retouche d’image pour modifier les images-titres, il faut les exporter et les uploader sur le serveur...)

Entièrement en Flash avec Lactalis International

  • typos, animations et effets sont entièrement customisables,
  • mais il faut passer des variables entre Flash et HTML pour synchroniser le menu avec le niveau de la page sur laquelle on se trouve (pour mettre le focus sur le bon sous-niveau du menu).

Avec les CSS et du Javascript, la mise en forme des menus déroulants a beaucoup évolué

Plusieurs niveaux de lecture avec utilisation de listes à puces, de différentes graisses, de plusieurs couleurs, de l’indentation... (CDiscount, Mon Guide Santé ou le menu de gauche d'Amazon)

Puis la taille des menus déroulants a augmenté et on a découvert de nouveaux menus de type "expand" qui prennent beaucoup plus de place mais contiennent beaucoup plus d'information. Exemples sur eBay, Kelkoo, Target, Decathlon ou Sage

Il arrive parfois que certains menus soient vraiment immenses

Comme par exemple celui de Surcouf (cf. mon billet "le menu le plus grand du monde") Mais on peut se demander si on peut encore appeler ça un "menu déroulant"...

Enfin, certains menus déroulants sont devenus des "menus déroulants riches"

  • Amazon par exemple avec le menu déroulant concernant les "Gifts et wish lists" qui offre :
    • un accès aux sous-rubriques
    • ainsi qu’à un formulaire de saisie.
  • Celui d'American Eagle permet :
    • d’accéder aux niveaux inférieurs,
    • de compléter un formulaire,
    • et de mettre en avant les promotions et des fonctionnalités (en utilisant une grande mise en page et des images)
  • Ou bien encore le menu déroulant de Saveur Bière, avec une hiérarchie complémentaire entre texte et images et une mise en page plus complexe (utilisation de 2 colonnes bien distinctes)

Conclusion

L’évolution des menus déroulants est à l’image de l‘évolution des sites web depuis quelques années : on est passé d’éléments relativement simples à des éléments beaucoup plus complexes au niveau visuel, technique et fonctionnel.

Les menus déroulants dits "enrichis" proposent des fonctionnalités et un niveau d’interactivité assez élevés comparativement aux menus simples 100% HTML, mais cela ne veut pas dire qu’ils sont plus adaptés à votre site : utiliser des menus déroulants "riches" signifie qu’ils seront peut-être plus "dans l’ère du temps", mais s’ils ne sont pas en adéquation avec les objectifs et le positionnement de votre site, leur utilité sera nulle.

Donc si vous souhaitez utiliser des menus déroulants, le choix de ces menus doit dépendre :

  • du type de votre site (e-commerce, marque, institutionnel…)
  • du mode de navigation que vous voulez mettre en place (et donc de l’arborescence de votre site)
  • du "petit plus" que vous souhaitez apporter à l’utilisateur,
  • du positionnement de votre site : le site de Tiffany (joaillerie de luxe) ne pourrait pas utiliser un menu riche comme celui de American Eagle par exemple, car ce dernier ne correspond pas du tout au positionnement et à l’image de la marque. Au contraire, un menu déroulant à 1 seul niveau, très sobre sur fond neutre et avec une typo élégante correspond à l’image de Tiffany.
  • et des contraintes liées à l’accessibilité et au référencement de votre site.

Voyez-vous d'autres exemples ou types de menus déroulants qui pourraient enrichir ce rapide panorama ?