MENUS DÉROULANTS

• TOULOUSE 1
  • Toulouse 11
  • Toulouse 12
  • Toulouse 13
• TOULOUSE 2
  • Toulouse 21
  • Toulouse 22
• TOULOUSE 3
  • Toulouse 31
  • Toulouse 32
  • Toulouse 33
  • Toulouse 34

Il vous faut concevoir le code css du menu #Deroulant1 en prenant exemple sur les exercices déjà réalisés et sur le code présenté dans le tuto Menus Déroulants.

Allez, pour vous aider à démarrer, le code css du premier niveau, ainsi que le code html vous sont gracieusement offerts par la maison.

• Transparent 1
  • Transparent 11
  • Transparent 12
  • Transparent 13
• Transparent 2
  • Transparent 21
  • Transparent 22
  • Transparent 23
  • Transparent 24
  • Transparent 25
• Transparent 3
  • Transparent 31
  • Transparent 32
  • Transparent 33
  • Transparent 34

L'exercice consiste là également à concevoir le code css du menu #Deroulant2 et le code html vous est encore gracieusement offert par la maison, mais pas le code css cette fois.

Attention petite complication, l'effet recherché est une opacité des images qui augmente au survol. Ces images étant réalisées avec le volet le plus opaque à gauche, il faudra penser à inverser le mouvement en jouant sur les valeurs de la propriété background-position :

background-position : 0 -190px pour a et background-position : 0 0 pour a:hover .

Consolation, le code css de ce menu est identique à celui du précédent à l'exception des url des images d'arrière-plan et des valeurs de background-position.

MENU DÉROULANT AVEC Une IMAGE COULISSANTE par item

Dans cet exercice, nous allons réaliser ce menu #Deroulant3 à partir du paysage d'Alésia découpé sous forme d'un puzzle dont chaque pièce de 190px*40px constitue l'image d'arrière-plan d'un item du menu.

Pour varier les plaisirs, nous allons mettre en pratique les trois techniques d'appel des images d'arrière-plan évoquées dans le dernier chapitre du tuto :

1. Pour l'item 1 et son sous-menu, on inscrira l'url de l'image d'arrière-plan dans l'attribut style en ligne
2. Pour l'item 2 et son sous-menu, on appliquera une class aux <li> du sous-menu
3. Pour l'item 3 et son sous-menu, on appliquera une class aux <a> du sous-menu

Le puzzle est constitué de trois colonnes de 6 images. Ces images, placées dans le dossier Alesia, sont numérotées Alesia19.png à Alesia36.png suivant le plan d'assemblage ci-dessous :

Alesia19.png	Alesia20.png	Alesia21.png
Alesia22.png	Alesia23.png	Alesia24.png
Alesia25.png	Alesia26.png	Alesia27.png
Alesia28.png	Alesia29.png	Alesia30.png
Alesia31.png	Alesia32.png	Alesia33.png
Alesia34.png	Alesia35.png	Alesia36.png