Un menu vertical en CSS - Partie 2

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 !

La deuxième partie est la plus sympa

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 :-)

Catégorie Tutoriels - Écrit par le 25/04/2010 - Article lu 4 268 fois - 4 commentaires

4 réflexions sur ce billet

Écrit par byakko
Le 25/06/2010 à 22h18

bonjour, j'ai essayé de suivre votre tuto car j'essaie désespérément une flèche a mon menu en cas de sous menu, mais rien a faire la flèche s'affiche partout...qu'il y ait des sous menus ou non!

merci d'avance!!

Écrit par Hervé
Le 25/06/2010 à 22h26

D'après le code du menu que vous avez posté (non affiché sur le blog), vous avez complètement modifié le code.

Je vous conseille de reprendre le tuto et d'effectuer les modifications une fois votre menu calé.

Écrit par den
Le 21/09/2010 à 21h59

Bonjour j'ai deux problèmes

Impossible d'avoir le sous menu et les fleches et cela ne marche pas dutout sous mozilla est ce normal

cordialement

Écrit par Hervé
Le 21/09/2010 à 23h15

Bonsoir

Sur quelle version de Firefox et quel OS ?

Les commentaires de ce billet sont fermés

Haut de page