Un menu vertical est réalisé dans problème en gardant la disposition normale d'une liste.

Le menu de l'exemple précédent peut être amélioré en rendant toute la ligne de la liste cliquable, et pas seulement le lien.
L'astuce consiste à forcer l'affichage des liens a comme si c'était des éléments de type bloc. On utilise la propriété display avec la valeur block.
Pour que les puces de la liste soient aussi cliquables, il faut les enlever des lignes et les mettre par exemple comme image de fond non répétée des liens. En procédant ainsi plutôt que d'ajouter les images dans le code HTML, on rend les modifications bien plus faciles à faire car il suffira de changer une ligne de la feuille de style si on veut changer la pluce, plutôt que reprendre toutes les pages du site qui utiliseraient le menu.

Complétez le code CSS pour obtenir le menu ci-contre.

La couleur de fond du menu est #0A0D0A et il est entouré par une ombre de 2 pixels avec 2 pixels de renfort, jaune avec une transparence de 0.7. La couleur des liens est #6d6d00. Au survol de la souris, les liens deviennent yellow et sont entourés avec la même ombre que le menu.

Toutes les images se trouvent dans le répertoire ../exemple/img/
L'image de fond de page s'appelle etoiles.jpg, la puce du menu s'appelle starv.png et quand elle est survolée par la souris starj.png.

Code à compléter

Une solution possible

Pour réaliser un menu horizontal, la solution qui offre le plus de liberté est de faire flotter les lignes de la liste avec la propriété float, valeur left (généralement) ou right (plus rarement).

Comme les lignes sont flottantes, elles sortent du flux normal et ne sont pas prises en compte pour le calcul de la hauteur de leur conteneur (l'élément ul) qui se retrouve donc avec une valeur de 0 et ne peut pas être éventuellement stylé. Pour résoudre ce problème il y a 2 solutions :

• on peut utiliser la propriété overflow avec la valeur auto sur l'élément ul. Cette solution est adéquate pour un menu à un seul niveau.
• dans le cas d'un menu à plusieurs niveaux, il faut plutôt donner une hauteur à l'élément ul avec la propriété height. On évitera ainsi des effets non désirés lors de l'affichage dynamique des sous-niveaux.

Complétez le code CSS pour obtenir le menu ci-dessous.

La page a une image de fond : ../exemple/img/etoiles.jpg.

La barre de menu a une hauteur de 60 pixels et la police est Verdana ou Geneva ou sans-serif, à la taille de 15 pixels.
Le fond est un dégradé linéaire qui commence par la couleur #AEBCBF et se termine par #0A0809. Il y a 2 autres points d'arrêt : #6E7774 à 45% et #0A0E0A à 65%.

Les lignes ont une largeur de 130 pixels et sont séparées par un espace de 10 pixels.

Les liens ont une hauteur de 40 pixels avec une marge intérieure de 4 pixels et sont blancs.
Au survol de la souris ils deviennent yellow et sont entourés par une ombre de 2 pixels avec 2 pixels de renfort, jaune avec une transparence de 0.7. Le fond du lien est noir avec une transparence de 0.2.

Code à compléter

Une solution possible

Pour réaliser la structure d'un menu à plusieurs niveaux, une solution simple est d'utiliser des listes imbriquées. Généralement le 1er niveau est fait avec une liste horizontale et les niveaux suivants (sous-niveaux) aves des listes verticales.

Les listes des sous-niveaux sont cachées par défaut avec la propriété display à laquelle on donne la valeur none.
La passage de la souris sur une ligne change la valeur de la propriété pour block ce qui la rend visible.

Les sélecteurs à utiliser sont un peu plus complexes que ceux des listes à un seul niveau car il faut cibler uniquement les enfants directs d'un élément ul ou li et non pas tous les descendants.
On utilise pour cela le combinateur > comme nous l'avons vu dans Sélectionner ▸ Sélecteur d'enfants

L'exemple suivant montre la réalisation d'un menu à 2 niveaux avec les principes décrits. On remarquera que les éléments de 1er niveau sont créés avec des liens a, même si ce ne sont pas des liens réels ( l'attribut href est une ancre interne "inexistante" qui pointera de la sorte sur le début de la page). En utilisant ces sortes de liens, il est plus facile de styler le menu (et en particulier quand il y a plus de 2 niveaux).

.menu-horizontal > li {
	float: left;
	margin: 0 5px;
	width: 100px;
	position: relative;
}				
.menu-vertical { 
	display: none;
	position: absolute;
	left: -10px;
	top: 1.5em;
	width: 100px;
}

Complétez le code HTML et le code CSS pour obtenir le menu à 3 niveaux ci-dessous.

La page a une image de fond : ../exemple/img/etoiles.jpg.

Menu de niveau 1

La barre de menu a une hauteur de 60 pixels et la police est Verdana ou Geneva ou sans-serif, à la taille de 15 pixels.
Le fond est un dégradé linéaire qui commence par la couleur #AEBCBF et se termine par #0A0809. Il y a 2 autres points d'arrêt : #6E7774 à 45% et #0A0E0A à 65%.

Les lignes ont une largeur de 130 pixels et sont séparées par un espace de 10 pixels.

Les liens ont une hauteur de 40 pixels avec une marge intérieure de 4 pixels et sont blancs.
Au survol de la souris ils deviennent yellow et sont entourés par une ombre de 2 pixels avec 2 pixels de renfort, jaune avec une transparence de 0.5. Le fond du lien est noir avec une transparence de 0.2.

Menu de niveaux 2 et 3

Les menus de niveaux 2 et 3 ont une fond de couleur #0A0D0A. Ils ont une largeur de 150 pixels et des marges internes verticales de 5 pixels et horizontales de 10 pixels. Ils sont entourés par par une ombre de 2 pixels avec 2 pixels de renfort, jaune avec une transparence de 0.5.

Au survol de la souris les liens deviennent yellow et leur fond devient noir avec une transparence de 0.2.

Conseil

Commencez déjà par la mise en place des listes, puis par le fonctionnement de l'affichage des différents niveaux de menu. Quand la gestion des survols et des affichages est correcte, stylez plus précisément les éléments avec les couleurs, marges, ombres, etc.

Code à compléter

Une solution possible