Construire un menu

menu unique

Soit le code suivant :

1) Mise en forme

En appliquant les propriétés CSS obtenir les résultats successifs suivants :

fond bordure dimensions	ligne de séparation	réduction des marges	texte grisé	titre gras noir

2) Effets de survol

Forme repliée		Survol
hauteur réduite	débordement masqué	changer le curseur	déploiement au survol	titre au survol	items au survol

3) Transition

Appliquer des transition pour :

• le déploiment
• le changement de couleur de fond
• le changement de couleur du texte

4) Empêcher le déplacement du contenu situé sous le menu

En utilisant la position "absolute", le menu est extrait du flux. En conséquence le menu non déployé se supperpose au contenu qui le suit.

On peut certes ajouter une marge au haut de l'élément suivant pour résoudre le problème. Cependant lors d'une modification des contenus, il sera à chaque fois nécessaire de veiller à la préservation de cette marge

Une meilleure solution consiste à englober le menu dans un élément en position relative. Un élément en position absolue se positionne par rapport à son plus proche parent en position relative ou absolue. Comme l'élément en position relative reste dans le flux la place ocupée par le menu non dépoloyé est préservée à condition de fixer une hauteur à l'élément en position relaive au moins égale à la hauteur du menu non déployé.

(ci-dessous en rouge l'élément en position relative)

En effet l'élément en position relative a par défaut une hauteur nulle puisqu'il ne contient que le menu qui est en position absolue, donc hors du flux.

5) Donner un effet de transparence au menu

En utilisant la propriété opacity, la transparence s'applique autant au fond qu'au texte qui peut devenir illisible

Pour ne pas appliquer de transparence au texte il suffit d'utiliser une couleur rgba pour le la couleur de fond (techweb)

Menus multiples

Soit le code suivant :

Généraliser le résultat précédent de sorte à obtenir un menu horizontal

• Comment gérer le problème de la hauteur de déploiement lorsque le nombre d'items varie d'un menu à l'autre ?
• La propriété "inline-block" confère aux éléments les propriétés d'un block
• Comment se comportent les marges d'un élément "inline-block"
• Le positionnement absolu semble t-il toujours nécéssaire ?
• On constate que lors du déploiement, c'est le contenu qui suit qui se supperpose au menu, le rendant illisible.

  

  Expliquer le phénimène et résoudre le problème :

  

Déploiement en accordéeon

Concevoir le déploiement en jouant sur la hauteur des items :

Copyright Gabriel Braun 2007