Un menu vertical en CSS - Partie 2

En ce beau dimanche de printemps, nous allons voir ensemble la fin de la construction du menu en CSS (pour rappel voir la partie 1).

Prêt ? Alors c'est parti !

Nous allons commencer par rendre le menu de niveau 2 visible au passage de la souris sur le niveau 1

Dans le fichier CSS, ajouter :

div#menu ul.rang1 li.smenu:hover ul.rang2 {
    display: block;
}

Voir le résultat

Pour une présentation identique entre le sous-menu et le menu, remplacer :

div#menu li a {
    color: #666;
}

Par :

div#menu li a,
div#menu ul ul li a, 
div#menu ul.rang1 li.smenu ul.rang2 a {
    color: #666;
}

Pour conserver la couleur de fond et la couleur de police sur le menu lors du survol du sous-menu, remplacer :

div#menu li a:hover,
div#menu ul.rang1 li.smenu:hover a {
    color: #FFF;
}

Par :

div#menu li a:hover, 
div#menu ul ul li a:hover, 
div#menu ul.rang1 li.smenu ul.rang2 a:hover, 
div#menu ul.rang1 li.smenu:hover a, 
div#menu ul.rang1 li.smenu ul.rang2 li.smenu:hover a {
    color: #FFF;
}

Voir le résultat

Dans un souci de visibilité, nous allons ajouter une flèche sur les menus pour indiquer qu'un sous-menu est disponible.

Après :

div#menu li a:hover, 
div#menu ul ul li a:hover, 
div#menu ul.rang1 li.smenu ul.rang2 a:hover, 
div#menu ul.rang1 li.smenu:hover a, 
div#menu ul.rang1 li.smenu ul.rang2 li.smenu:hover a {
    color: #FFF;
}

Ajouter :

div#menu ul.rang1 li.smenu {
    background: #ddd url(../images/fleche-droite.png) 95% 50% no-repeat;
}

Et pour garder notre background et notre police du menu au survol du sous-menu, ajouter juste en dessous :

div#menu ul.rang1 li.smenu:hover {
   background: #666 url(../images/fleche-blanche-droite.png) 95% 50% no-repeat;
}

Vous noterez que j'en ai profité pour changer la couleur de la flèche au survol.

Voir le résultat

En passant la souris sur le menu 4, on s'aperçoit que le principe est conservé sur le niveau 2 avec l'apparition d'une flèche indiquant un autre niveau. On va donc pouvoir afficher notre menu du niveau 3.

Remplacer :

div#menu ul.rang1 li.smenu:hover ul.rang2 {
    display: block;
}

Par :

div#menu ul.rang1 li.smenu:hover ul.rang2, 
div#menu ul.rang2 li.smenu:hover ul.rang3 {
    display: block;
}

On stylise le sous-menu de niveau 3.

Remplacer :

div#menu li a,
div#menu ul ul li a, 
div#menu ul.rang1 li.smenu ul.rang2 a {
    color: #666;
}

Par :

div#menu li a, 
div#menu ul ul li a, 
div#menu ul ul ul li a, 
div#menu ul.rang1 li.smenu ul.rang2 a, 
div#menu ul.rang1 li.smenu ul.rang2 li.smenu ul.rang3 a {
    color: #666;
}

Pour terminer, remplacer :

div#menu li a:hover, 
div#menu ul ul li a:hover, 
div#menu ul.rang1 li.smenu ul.rang2 a:hover, 
div#menu ul.rang1 li.smenu:hover a, 
div#menu ul.rang1 li.smenu ul.rang2 li.smenu:hover a {
   color: #FFF;
}

Par :

div#menu li a:hover, 
div#menu ul ul li a:hover, 
div#menu ul ul ul li a:hover, 
div#menu ul.rang1 li.smenu ul.rang2 a:hover, 
div#menu ul.rang1 li.smenu ul.rang2 li.smenu ul.rang3 a:hover, 
div#menu ul.rang1 li.smenu:hover a, 
div#menu ul.rang1 li.smenu ul.rang2 li.smenu:hover a {
    color: #FFF;
}

Voir le résultat

Ce tutoriel serait terminé s'il ne restait pas à régler le cas d'Internet Explorer 6. En l'état, le menu ne fonctionne pas sous IE6 puisque ce dernier ne comprend pas la pseudo classe :hover sur un autre élément que la balise a.

Rassurez-vous, il existe une solution. Celle que je vais vous expliquer permettra de conserver un CSS valide W3C.

Nous allons créer un nouveau fichier css que l'on nommera menu-ie6.css.

Ce fichier contiendra uniquement une classe appelant le fichier pour corriger le problème au survol :

body {
    behavior: url(css/csshover.htc);
}

Vous pouvez télécharger le fichier en cliquant ici

Pour terminer, nous allons modifier le fichier index.html.

Après :

<link href="css/menu8.css" type="text/css" rel="stylesheet" />

Ajouter :

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/menu8-ie6.css" />
<![endif]-->

La seule différence avec les autres navigateurs est la disparition de la flèche au survol.

Voir le résultat

Ce tutoriel est à présent terminé. N'hésitez à envoyer vos commentaires :-)