Ce menu horizontal est basé sur des propriétés CSS (avec la pseudo-classe :hover). Il ne fonctionne sur des navigateurs récents (exit IE6). Les rubriques et les sous-rubriques s’adaptent automatiquement en largeur et elles sont fonction de leur contenu. En survol d’une sous rubrique, la rubrique principale reste sélectionnée.
Code XHTML
[sourcecode language= »html »]
[/sourcecode]
Code feuille de style CSS
La liste à puces verticale va être transformer en une liste horizontale.
[sourcecode language= »css »]
ul.menu {
width: auto;
height: 35px;
line-height: 35px;
}
ul.menu li {
float: left;
height: 35px;
width: auto;
}
ul.menu li a {
padding: 0px 10px 0px 10px;
color: #FFFFFF;
background: #000000;
font-weight: bold;
margin: 0;
display: block;
}
ul.menu li a:hover {
color: #FFFFFF;
background: #ed7928;
}
[/sourcecode]
Pour faire disparaître les sous-rubriques, il suffit d’ajouter display:none à la sous-rubrique de la classe menu :
[sourcecode language= »css »]
ul.menu li ul {
display:none; /* masques les sous-rubriques */
width: auto; /* largeur automatique */
/* remise à 0 des valeurs du parent */
margin: 0;
padding: 0;
/* end */
}
[/sourcecode]
Maintenant, il nous suffit de mettre les sous rubriques en vertical car elles ont hérités de leur parent une mise en forme horizontale et de faire apparaître les sous-rubriques en survol de la rubrique.
Sous-rubrique en vertical
[sourcecode language= »css »]
ul.menu li:hover ul {
display:block;
}
ul.menu li:hover ul li {
float:none;
/* remise à 0 des valeurs du parent */
width: inherit;
margin: 0;
}
[/sourcecode]
En se déroulant, les sous rubriques sont en dessous et décalé. Pour cela il faut attribuer une position absolue aux sous-rubrique.
[sourcecode language= »css »]
ul.menu li ul {
position:absolute;
width:auto; /* largeur automatique */
}
[/sourcecode]
Votre menu est quasiment finalisé, il ne vous reste plus qu’à avoir un survol qui reste actif sur la rubrique. Il faut ajouter « ul.menu li:hover > a » à la déclaration « ul.menu li a:hover » comme sur l’exemple suivant :
[sourcecode language= »css »]
ul.menu li a:hover, ul.menu li:hover > a {
color: #FFFFFF;
background: #ed7928;
}
[/sourcecode]
Votre feuille de style finale est la suivante :
[sourcecode language= »css »]
body {
font-family: Arial;
font: 12px;
}
ul.menu {
width: auto;
height: 35px;
line-height: 35px;
}
ul.menu li {
float: left;
height: 35px;
width: auto;
}
ul.menu li a {
padding: 0px 10px 0px 10px;
color: #FFFFFF;
background: #000000;
font-weight: bold;
margin: 0;
display: block;
}
ul.menu li a:hover, ul.menu li:hover > a {
color: #FFFFFF;
background: #ed7928;
}
ul.menu li ul {
display:none; /* masques les sous-rubriques */
width: auto; /* largeur automatique */
/* remise à 0 des valeurs du parent */
margin: 0;
padding: 0;
/* end */
}
ul.menu li ul li a {
background: #ed7928;
color: #FFFFFF;
display: block;
padding: 0px 10px 0px 10px;
margin: 0;
}
ul.menu li ul li a:hover {
background: #ffebd3;
color: #ed7928;
}
ul.menu li:hover ul {
display:block;
}
ul.menu li:hover ul li {
float:none;
/* remise à 0 des valeurs du parent */
width: inherit;
margin: 0;
}
ul.menu li ul {
position:absolute;
width:auto; /* largeur automatique */
}
[/sourcecode]
Voir le résultat et téléchargement
Compatible avec :
- Firefox 3
- Firefox 3.5
- IE 7
- IE 8
- Chrome
- Safari 3
- Safari 4
Note :
Nous avons du ajouté un div avant chaque lien afin de permettre à IE7 d’interpréter correctement le menu sans bug d’affichage.