Il n'est pas toujours évident de trouver l'inspiration géniale pour la navigation de son site web.
Choisir un menu vertical, horizontal, déroulant, par onglets, graphique, hybride, ...? Statique, dynamique, sobre, tape-à-l'oeil, ...?
Que de questions qui vous ont déjà torturé l'esprit !
Un menu varié et diététique
Un menu en CSS a l'avantage d'être varié (multiples possibilités) et diététique (économie du code).
La façon la plus propre et sémantique de structurer un menu est sous forme de liste simple (ul, li), ou de liste de définition (dl, dt, dd) si le menu présente des "titres". Voir à ce sujet l'excellent article sur Pompage [fr] "Les listes de définitions : mal utilisées ou mal comprises ?".
Une référence dans ce domaine est le fameux Listamatic [en] ou Listamatic2 [en] (pour les menus/listes imbriqués).
Listamatic propose de nombreux menus verticaux et horizontaux simples, des tutoriels pour créer ses menus, ainsi que des liens vers des menus sur des sites externes.
Un menu à la carte
Depuis quelques temps, un outil a été créé à partir des ressources de Listamatic, pour les fainéants qui n'ont pas envie de se salir les mains avec du code :)
Cet outil, List-o-matic [en] se présente sous la forme d'une extension pour Dreamweaver et UltraDev.
Vous pouvez également trouver cet outil en ligne [en] et il vous permettra de construire des menus simples mais agréables.
Dans mes pérégrinations web, j'ai également trouvé un Menu Generator [en] qui semble bien fonctionner aussi.
A vous de jouer !
N'ayant trouvé aucune ressource complète francophone sur ce sujet, j'ai créé une (ébauche de) galerie de menus sur Alsacréations [fr].
L'utilité de cette galerie est de permettre à tous de trouver l'inspiration grâce à des menus de toute sorte : classiques, déroulants, graphiques,...
Tous les menus sont structurés sous forme de liste, conformes aux Standards et fonctionnent sur tous les navigateurs respectants ces Standards. Je remercie les premiers participants qui m'ont envoyé des menus de leur crû afin de commencer à avoir une base de départ.
J'en profite pour faire appel à vous afin que cette galerie soit vraiment une source d'inspiration multiple et variée : n'hésitez pas à faire apparaître votre menu dans cette liste. Il vous suffit de me contacter (mail dans la galerie), de me transmettre votre menu (CSS intégrée au HTML), soit au format HTML soit en format ZIP compressé si vous utilisez des images. Merci de rajouter des commentaires à votre CSS et d'indiquer les problèmes de compatibilité rencontrés avec les navigateurs.
Avec votre participation, on pourra peut-être réaliser un panel intéressant et surtout utile pour tout le monde !