Éducation, société et technologie
Listamatic

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

Listes horizontales

Listes expérimentales

Liens vers d’autres listes

Information à propos des listes

Auto-générateurs de listes


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 29561 / 1816296

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site CSS - Feuilles de styles   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 5