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
- Simple list
- Simple list with square bullets
- Simple list with circle bullets
- Using images for bullets
- Using CSS background images for bullets
- Eric Meyer’s simple separators
- Eric Meyer’s Panelise
- Rollover lists
- Eric Meyer’s Strengthening the links
- A List Apart’s Taming lists
- ProjectSeven’s Uberlist
- Bieler Batiste’s list
- Vertical buttons
- Bulleted Rollover List
- 3D Imenu in blue
- Double Border - added 24 April 2004
Listes horizontales
- Simple horizontal list
- Rollover horizontal list
- Rollover horizontal list navbar
- Eric Meyer’s navbar
- Eric Meyer’s tabbed navbar
- Simple Bits tabbed navbar
- ProjectSeven’s horizontal Uberlist
- Kalsey CSS tabs
- Jeffrey Zeldman’s DWWS navigation
- Clagnut CSS Tabs
- Unraveled CSS Tabs
- Dive into Mark Pure CSS Tabs
- Horizontal buttons
- Webfroot Horizontal NavBar
- ZDnet Emulation
- Centred list navbar
- Huphtur’s Emerica navbar
- Image swap
- Seth’s horizontal list
- Float your boat
- Brick
- Contrast : smhill
- Alteration to Rollover Horizontal List Navbar
- SuperfluousBanter 2003
- Horizontal Bullet On Hover
- The Gradient Green Navigation Bar - added 24 April 2004
Listes expérimentales
Liens vers d’autres listes
- Strange ordered multilevel list
- Dynamic Vertical list
- Dynamic horizontal list
- Hierarchical lists in column format
- Vertical list with sub nav
- Expanding Nested Lists
- Menus dynamiques
- Horizontal Toolbar List with Access Keys
- UL Menu Experiments
- Tabular list
- Round corner tabs
- PureDom Nav
- Hover CSS menu
- Modification of Eric Meyer’s Strengthening the links
- Modification of Seth’s horizontal list
Information à propos des listes
- External resources used on this site
- Why use lists for site navigation ?
- Browsers types and lists
- The IE box model and Doctype modes
- Browser support chart
Auto-générateurs de listes