Skip to content

Un menu horizontal CSS

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.