Menu graphique animé en CSS3

Principe général :

Ce menu est structuré sous forme de liste (ul, li) contenant un image (img) ainsi qu'une sous-liste indiquant le détail de chaque élément.

Les éléments de liste sont dimensionnés (largeur et hauteur de 200px) et disposés horizontalement à l'aide de la règle "display: inline-block". Note : il eût été possible de positionner ces éléments en flottant, à condition d'affecter un "clear: both" aux élément suivants.

Le comportement au survol est géré via le module Transition de CSS3 et en utilisant les propriétés transition-property, transition-duration et transition-timing-function

Chaque image est positionné en absolu, pour masquer le texte par défaut, puis l'effet est d'appliquer un padding-left à l'image.

Compatibilité :

Fonctionne sur les moteurs webkit (Safari et Chrome).

Ne fonctionne pas encore sur Firefox (pas de transition), mais c'est prévu pour la prochaine version 3.6

Ne fonctionne pas sur Internet Explorer (pas de transition sur IE8, et non compréhension de inline-block pour les versions précédentes) ni Opéra.

Droits d'auteur :

Le visuel et le comportement de ce menu sont inspirés du site personnel Polychromies de Raphaël Goetter