CSS - Menus et navigation

vendredi 9 juillet 2004 par André Vincent

Diverses techniques pour créer des menus et barres de navigation à l’aide CSS.

Ici est démontré la souplesse des CSS. Il est ainsi possible de générer une variété de menus et barres de navigation, tant verticales qu’horizontales à partir d’une simple liste à puce de ce type :

<ul> <li>navigation 1</li> <li>navigation 2</li> <li>navigation 3</li> </ul>

La majeure partie des exemples fournis ici pointent vers l’excellent site australien Listamatic (en anglais). Des sites français ont également traduit une bonne partie de ces tutoriaux et en présentent aussi de nouveaux :

Alasacreations
Pompage.net Excellent exemple de remplacement des classiques menus dynamiques horizontaux constitués d’une multitude d’images insérés dans des tableaux et contrôlés par des fonctions javascript de "rollover" et "preload"), la technique présentée ici n’exige aucun javascript et repose entièrement sur les CSS et un strict minimum d’images.
La vengeance des menus déroulants. Sans doute la méthode la plus simple et la plus souple, avec le strict minimum de javascript, pour réaliser un menu déroulant horizontal ou vertical de un, deux ou plusieurs niveaux de profondeur.
Menu horizontal déroulant et compatible avec tous les navigateurs modernes. Exige toutefois passablement d’intervention dans le code javascript.

Listes verticales