Dans les exemples précédents, la barre de menu utilisait une 
liste. Avec ceci vous avez non seulement une structure qui correspond au sens d'un menu (présenter une liste de liens), mais aussi trois éléments emboîtés différents que vous pourrez formater avec des CSS: <ul>, <li> et <a>.
Pour atteindre une représentation uniforme, définissons d'abord les formats des listes pour annuler les valeurs par défaut des les différents navigateurs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barres de menu</title>
<style type="text/css">
body, a {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
}
ul#menu {
margin: 0; padding: 0;
}
ul#menu li {
list-style: none;
margin: 0; padding: 0;
}
</style>
</head>
<body>
<h1>Définir une barre de menu</h1>
<ul id="Navigation">
<li><a href="menu_definir.htm">Exemple 1</a></li>
<li><a href="menu_formater.htm">Exemple 2</a></li>
<li><a href="menu_rollover.htm">Exemple 3</a></li>
</ul>
</body>
</html>
Les distances ont été mises à 0 pour <ul> et pour <li>, et la numérotation pour <li> a été annulée par list-style:none. Vous avez maintenant une liste sans puces visibles, les éléments sont toutefois ordonnés à cause de la propriété bloc des éléments de la liste.
Dans l'exemple suivant les distances seront redéfinis, une largeur est fixée pour la liste, ainsi qu'une bordure et des couleurs.
ul#menu {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#menu { /* corrections pour IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#menu li {
list-style: none;
margin: 0.4em; padding: 0.2em;
border: 1px solid gray;
background-color: #eee;
}
ul#menu a {
text-decoration: none; font-weight: bold;
color: maroon; background-color: #ccc;
}
ul#menu a:hover {
color: white; background-color: gray;
}
L'attribution de bordures et de couleurs d'arrière-plan rend visible la structure. De tels formatages complexes de listes demandent assez souvent des corrections pour Internet Explorer (surtout pour les anciennes versions) comme un aiguillage spécial vieux navigateurs: dans ces exemples nous utiliserons à cet effet l'aiguillage "star HTML" pour d'anciennes versions, et plus loin aussi le "star plus HTML" pour IE 7.
L'élément a a été munie d'une couleur d'arrière-plan qui change, ainsi que les couleurs du texte, par l'effet de la pseudo-classe :hover. Cela donne l'effet roll-over qui est plus facile à mettre en place qu'avec le javascript. Ce qui manque ici, c'est l'effet bouton, car la balise <a> ne prend que la place nécessaire à sa grandeur propre puisqu'elle est, ici, un élément in-line.
Pour élargir le domaine du lien à toute la balise li et pour obtenir un effet bouton roll-over, on définit maintenant les liens avec display:block.
ul#menu {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#menu { /* corrections pour IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#menu li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#menu a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a { /* largeur pour IE seulement */
width: 100%;
w\idth: 8.8em;
}
ul#menu a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
Malheureusement, IE jusqu'à la version 6 nécessite, en plus de display:block, une indication de largeur. Pour IE 6 en mode conforme standard et pour de précédentes versions, celle-ci est donnée différamment selon le modèle de boîte utilisé.
La bordure et la marge intérieure de <li> sont attribuées, ici, au lien, de manière à donner l'effet rollover à toute la barre du menu. Les différentes couleurs du bord ont ajouté un effet 3D.
Une navigation comportant un grand nombre de liens dans un menu vertical sera mieux visible si elle est classée dans des rubriques avec des sous-titres. C'est le but de l'exemple suivant, dans lequel des éléments h2 sont rajoutés à la liste. Ces nouveaux éléments reçoivent les mêmes attributs CSS que les liens.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu avec titres</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#menu {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#menu { /* corrections pour IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#menu li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#menu a, ul#menu span, ul#menu h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a, * html ul#menu span, * html ul#menu h2 {
width: 100%; /* largeur pour IE 5.x */
w\idth: 8.8em; /* largeur pour IE 6 */
}
ul#menu a:hover, ul#menu span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#menu h2 {
font-size: 1em;
margin: 1.1em 0 0;
border-color: gray;
color: black; background-color: #eee;
}
</style>
</head>
<body>
<h1 id="exemple">Menu avec titres</h1>
<ul id="menu">
<li><h2>Rubrique 1</h2></li>
<li><a href="#exemple">Page 1</a></li>
<li><a href="#exemple">Page 2</a></li>
<li><a href="#exemple">Page 3</a></li>
<li><h2>Rubrique 2</h2></li>
<li><span>Page active</span></li>
<li><a href="#exemple">Page 5</a></li>
<li><a href="#exemple">Page 6</a></li>
<li><h2>Rubrique 3</h2></li>
<li><a href="#exemple">Page 7</a></li>
<li><a href="#exemple">Page 8</a></li>
<li><a href="#exemple">Page 9</a></li>
</ul>
</body>
</html>
Comme les éléments de titres sont prédéfinis dans les navigateurs comme étant agrandis et munis de marges, ces mentions sont indiquées explicitement pour <h2>. margin-top a été agrandi pour permettre de bien séparer visuellement les rubriques. Les sous-titres sont mis en évidence par leur couleur.
Ce qui est nouveau dans cet exemple, c'est que le point de liste « page active » n'est plus un lien. Cela facilite l'emploi, car la page visitée est ainsi reconnaissable et ne peut pas être confondue avec un lien inutile. Pour ceci, l'élément de liste « page active » est pourvu d'un <span>, qui lui donne les mêmes valeurs que les liens lors du rollover; vous pouvez, bien sûr, accentuer encore cette mise en évidence.
Un menu comportant peu de liens peut être agencé de manière horizontale. Pour cela il existe deux possibilités, avec chacune ses avantages et ses inconvénients. La plus simple consiste à attribuer aux éléments li la valeur display:inline. Elle permet ainsi de centrer le texte, en utilisant la valeur text-align:center attribuée à l'élément parent.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barre de menu horizontale et centrée</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#menu {
margin: 0; padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: silver;
}
ul#menu li {
list-style: none;
display: inline;
margin: 0.4em; padding: 0;
}
ul#menu a, ul#menu span {
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a, * html ul#menu span {
width: 1em; /* nécessaire pour IE 5.0x seulement */
w/idth: auto; /* annulé par mesure de sécurité pour IE 6 */
}
ul#menu a:hover, ul#menu span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<h1 id="exemple">Barre de menu horizontale et centrée</h1>
<ul id="menu">
<li><a href="#exemple">Page 1</a></li>
<li><a href="#exemple">Page 2</a></li>
<li><a href="#exemple">Page 3</a></li>
<li><span>Page active</span></li>
<li><a href="#exemple">Page 5</a></li>
<li><a href="#exemple">Page 6</a></li>
</ul>
</body>
</html>
Comme on ne peut pas attribuer de largeur à des balises inline, celle-ci correspondra à la largeur du texte (la largeur de 1em pour Internet Explorer sert à corriger la version 5.0). Utilisez cette possibilité si les éléments du menu doivent avoir des largeurs variables ou n'utiliser que la largeur nécessaire au texte.
Cependant cette méthode a un désavantage: Lors de changement de largeur vers une petite fenêtre d'affichage, il y aura inévitablement des chevauchements. Cet effet peut être voulu, mais diminue la fonctionnalité. Veillez à n'utiliser que des espaces protégées ( ), pour éviter un saut à la ligne au milieu d'un lien.
Une largeur uniforme des boutons de menu indépendante du contenu peut être obtenue dans une barre de menu horizontale si vous utilisez la propriété CSS float. Vous pouvez l'attribuer soit à l'élément <li> soit aux éléments que celui-ci contient, dans quel cas il faut définir li {display:inline}. C'est préférable pour plusieurs raisons.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barre de menu horizontale à largeurs égales</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#menu {
margin: 0; padding: 0.8em;
text-align: center;
border: 1px solid black;
background-color: silver;
}
ul#menu li {
list-style: none;
display: inline;
margin: 0; padding: 0;
}
ul#menu a, ul#menu span {
float: left; width: 6em;
margin: 0.4em; padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a, * html ul#menu span { /* correction pour IE 5.x */
width: 8em;
w\idth: 6em;
}
ul#menu a:hover, ul#menu span {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
ul#menu div {
clear: left;
}
</style>
</head>
<body>
<h1 id="exemple">Barre de menu horizontale à largeurs égales</h1>
<ul id="menu">
<li><a href="#exemple">Page 1</a></li>
<li><a href="#exemple">Page 2</a></li>
<li><a href="#exemple">Page 3</a></li>
<li><span>Page active</span></li>
<li><a href="#exemple">Page 5</a><div></div></li>
</ul>
</body>
</html>
Dans cet exemple aussi, l'attribution display:inline aux éléments li est nécessaire pour empêcher sauts à la ligne. Comme les boutons de menu reçoivent par l'attribution de float des propriétés d'éléments de bloc, une largeur (width) et une marge extérieure (margin) peuvent leur être attribuées et un éventuel chevauchement est ainsi évité. Pour rétablir le flux, et dans cet exemple pour entourer les boutons du menu de l'arrière-plan et de la bordure de la liste, un élément avec la propriété CSS clear est indispensable à l'intérieur de la liste. C'est dans ce but qu'un élément div vide et sans autre signification sémantique est utilisé. Avec Internet Explorer cependant, cela ne fonctionne que tant qu'il n'y a pas de saut à la ligne à l'intérieur de la barre de menu.
Vous pouvez aussi attribuer une largeur adaptée à ul#menu pour que, en cas de petite fenêtre d'affichage, vous offriez une barre de défilement plutôt qu'un saut à la ligne. Selon CSS 2.1 vous pouvez aussi appliquer float sans indication de largeur, pour éviter des chevauchements en cas de saut à la ligne.
Un menu qui est, comme l'exemple ci-dessus, pourvu de sous-titres, aura souvent des niveaux de menus différents plutôt qu'une simple une liste de liens. Dans ce cas les titres sont les éléments principaux du menu et peuvent être des liens vers des pages correspondant aux différentes rubriques. Une liste emboîtée représente cette structure de manière optimale.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu à plusieurs niveaux</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
ul#menu {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#menu { /* correction pour IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#menu li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#menu li ul {
margin: 0 0 0 1em; padding: 0;
}
ul#menu li ul li {
margin: 0.1em 0;
}
* html ul#menu li ul li { /* correction pour IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
ul#menu a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a {
width: 100%; /* largeur pour IE 5.x */
w\idth: 8.8em; /* largeur pour IE 6 */
}
* html ul#menu li ul li a {
width: 100%; /* largeur pour IE 5.x */
w\idth: 7.8em; /* largeur pour IE 6 */
}
ul#menu a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
</style>
</head>
<body>
<h1 id="exemple">Menu à plusieurs niveaux</h1>
<ul id="menu">
<li><a href="#exemple">Page 1</a></li>
<li><a href="#exemple">Page 2</a>
<ul>
<li><a href="#exemple">Page 2a</a></li>
<li><a href="#exemple">Page 2b</a></li>
<li><a href="#exemple">Page 2c</a></li>
</ul>
</li>
<li><a href="#exemple">Page 3</a></li>
<li><a href="#exemple">Page 4</a></li>
</ul>
</body>
</html>
Dans le deuxième élément <li>, on a introduit une liste supplémentaire, car <ul> ne doit pas contenir d'autres éléments que <li>.
À l'aide des sélecteurs d'éléments descendants ul#menu li ul et ul#menu li ul li, les propriétés de la liste imbriquée sont modifiées de sorte à rendre les boutons du deuxième menu plus en retrait et de ce fait moins larges, ainsi qu'à diminuer la distance entre eux et avec le bouton de menu parent. Il est évident qu'on peut prévoir d'autres formatages avec les CSS pour visualiser cette structure.
Même sans CSS, la structure des listes emboîtées est bien visible avec les définitons par défaut des navigateurs, comme le montrera 
cet exemple.
Vous pouvez aussi traiter séparément une liste emboîtée, les boutons principaux horizontalement dans une ligne, et le niveau secondaire verticalement en dessous. Pour réaliser cette disposition, il est nécessaire d'aligner les éléments li du premier niveau par float, et de leur attribuer la propriété position:relative, afin que leurs positions servent de référence aux éléments de la liste du deuxième niveau, sortis du flux à l'aide de position:absolute.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Barres de menu séparées</title>
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#bord {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#bord { /* correction pour IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#bord div {
clear: left;
}
ul#menu {
margin: 0; padding: 0;
text-align: center;
}
ul#menu li {
list-style: none;
float: left;
width: 8.6em;
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#menu li { /* correction pour den IE 5 et 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#menu li { /* correction pour IE 7 */
margin-bottom: -0.1em;
}
ul#menu li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.7em; left: -0.4em;
}
* html ul#menu li ul { /* correction pour IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#menu li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#menu a, ul#menu span {
display: block;
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a, * html ul#menu span { /* nécessaire pour IE seulement */
width: 100%;
w\idth: 6.4em;
}
ul#menu a:hover, ul#menu span, li a#actif {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#actif { /* marquer la rubrique active */
color: maroon; background-color: silver;
}
ul#menu li ul span { /* marquer la sous-page active */
background-color: maroon;
}
</style>
</head>
<body>
<h1 id="exemple">Barres de menu séparées</h1>
<div id="bord"><ul id="menu">
<li><a href="#exemple">Page 1</a></li>
<li><a href="#exemple">Page 2</a>
<ul>
<li><a href="#exemple">Page 2a</a></li>
<li><a href="#exemple">Page 2b</a></li>
</ul>
</li>
<li><a href="#exemple">Page 3</a></li>
<li><a id="actif" href="#exemple">Page 4</a>
<ul>
<li><a href="#exemple">Page 4a</a></li>
<li><span>Page active</span></li>
<li><a href="#exemple">Page 4c</a></li>
</ul>
</li>
<li><a href="#exemple">Page 5</a></li>
</ul><div></div></div>
</body>
</html>
Dans cette barre de menu, un saut à la ligne doit être évité pour respecter le bon ordre des boutons de menu. Par conséquent une largeur suffisante doit être donnée, qui en revanche, ne doit pas être attribuée à la liste car cela pourrait conduire à une mauvaise interprétation par certains navigateurs. Dans cette optique on introduit un élément (div#bord) supplémentaire autour de la barre de menu. Celui-ci prend en charge également la définition du cadre et de la couleur d'arrière-plan. Comme élément sans signification sémantique, il n'a pas d'influence sur l'aperçu. Comme les éléments de la liste sont sortis du flux par float il faut introduire, à l'intérieur du cadre, un élément supplémentaire munie de la propriété CSS clear qui rétablit celui-ci. Pour cela, on se sert d'un second bloc vide, un élément div (<div></div>).
Les listes emboîtées du second niveau sont positionnées par le sélecteur de descendants ul#menu li ul de manière absolue en-dessous du bouton de la liste correspondante. Pour les boutons de la liste de second niveau, la propriété float est annulée par le sélecteur de descendants ul#menu li ul li.
Dans cet exemple, le bouton de menu de la page active n'est pas un lien, mais pourvu d'un élément <span> formaté séparément avec des CSS. Pour mettre en évidence le bouton de premier niveau correspondant, celui-ci se voit attribué id="actif".
Les navigateurs modernes permettent aussi de dynamiser le menu de niveau secondaire. Un petit complément seulement sera necessaire dans la feuille de style:
/* Complément pour affichage dynamique */
ul#menu li>ul {
display: none; top: 1.6em;
}
ul#menu li:hover>ul, ul#menu li>a#actif+ul {
display: block;
}
/* adaptation pour IE 7 */
*:first-child+html ul#menu ul {
background-color:silver; padding-bottom:0.4em;
}
Par le sélecteur filial li>ul, les listes du second niveau sont cachées au moyen de display:none. Survolées par la souris, elles s'affichent de nouveau par le sélecteur combiné ul#menu li:hover>ul avec display:block. De même la liste active choisie par le sélecteur complexe ul#menu li>a#actif+ul qui ne concerne que la liste ul qui suit le lien a#actif, lequel est un élément filial d'un li dans ul#menu. Pour que la liste qui apparaît lors du survol de la souris ne disparaisse pas lorsque la souris passe à proximité du premier bouton de menu, elle doit être positionnée un peu plus haut de manière à chevaucher le bouton de menu de premier niveau. En regardant bien, vous remarquerez la distance un peu inférireure à celle de margin pour les éléments emboîtés de la liste.
Pour que cet exemple fonctionne bien aussi avec Internet Explorer 7 lors de plusieurs sous-menus, on donnera une couleur d'arrière-plan au sous-menu.
Cet exemple fonctionne de manière satisfaisante avec des navigateurs modernes. Avec Internet Explorer jusqu'à la version 6 et des navigateurs plus anciens, des barres de menu basées uniquement sur les CSS ne sont pratiquement pas possibles, car ils ne reconnaissent l'état :hover seulement pour les liens - et plus précisément pour les balises a pourvues de l'attribut href et celles-ci ne peuvent pas s'emboîter. Comme ces navigateurs ne peuvent pas interpréter les sélecteurs présentés ici, ils affichent cet exemple comme le précédent, soit pas dynamiquement.
Cet exemple aussi est basé sur la liste emboîtée présentée plus haut. Le sous-menu est caché ici, et visible par tous les navigateurs modernes lors du survol avec la souris. Tant que vous munirez les boutons de menu du premier niveau de liens vers des pages alternatives pour vieux navigateurs et les rendrez accessibles à la navigation par le clavier, une telle barre de menu, dynamique, est utilisable. Les pages alternatives pourraient contenir, en plus des liens du menu de l'autre niveau, une introduction à la rubrique concerné.
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: #ffffe0;
}
div#bord {
width: 47.1em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html div#bord { /* correction pour IE 5.x */
width: 48.7em;
w\idth: 47.1em;
}
div#bord div {
clear: left;
}
ul#menu {
margin: 0; padding: 0;
text-align: center;
}
ul#menu li {
list-style: none;
float: left; /* sans width - permis d'après CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#menu li { /* correction pour IE 5 et 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#menu li { /* correction pour IE 7 */
margin-bottom: -0.1em;
}
ul#menu li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* cacher le sous-menu */
}
* html ul#menu li ul { /* correction pour IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#menu ul { /* adaptation pour IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#menu li:hover ul {
display: block; /* afficher le sous-menu par les navigaters modernes */
}
ul#menu li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#menu a, ul#menu span {
display: block;
width: 6.4em; /* attribuer la largeur aux éléments contenus dans li */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#menu a, * html ul#menu span {
width: 8.6em; /* largeur pour ancien modèle de boîte pour IE 5.x */
w\idth: 6.4em; /* largeur correcte pour IE 6 en mode standard */
}
ul#menu a:hover, ul#menu span, li a#actif {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#actif { /* marquer la rubrique active */
color: maroon; background-color: silver;
}
ul#menu li ul span { /* marquer la sous-page active */
background-color: maroon;
}
Par le sélecteur d'éléments descendants ul#menu li ul, le sous-menu sera caché par tous les navigateurs pas tout à fait anciens. En revanche elle apparaîtra lors du survol de la souris seulement avec les navigateurs modernes. Les utilisateurs de navigateurs anciens ou déficients peuvent atteindre le but en faisant le détour par les pages alternatives dans le menu principal.
La largeur des boutons de menu n'est pas définie pour <li> angegeben, mais pour les éléments qu'elle contient. La possibilité d'utiliser float sans valeur pour width existe depuis CSS 2.1 et empêche l'affichage erroné de l'exemple précédent avec Opera 7. Pour Internet Explorer 5.x, la largeur est donné d'après le modèle de boîte déficient de Microsoft.
Testez une telle barre de menu avec le plus de navigateurs possible, car cette méthode pourrait en dépasser certains!
Pour permettre également l'apparition dynamique du sous-menu avec Internet Explorer 5 et 6 ainsi qu'avec d'autres navigateurs sans implémentation suffisante des CSS, il ne vous reste actuellement qu'une réalisation avec du 
JavaScript. Il est cependant judicieux de la combiner avec la possibilité montrée ici.
La fonction JavaScript montrée dans ce qui suit est insérée dans la partie <head> de l'exemple ci-dessus et permet un affichage dynamique du sous-menu avec les versions 5 et 6 de l'Internet Explorer.
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("menu").firstChild;
do {
if (chercherUL(LI.firstChild)) {
LI.onmouseover=afficher; LI.onmouseout=cacher;
}
LI = LI.nextSibling;
}
while(LI);
}
function chercherUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function afficher() {
var UL = chercherUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function cacher() {
chercherUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
Pour éviter des répercussions non désirées avec d'autres navigateurs, le script sera rendu accessible pour Internet Explorer seulement (aussi la version Macintosh) par un aiguillage de navigateurs. La fonction hoverIE sera appelée à l'aide du script au moyen du gestionnaire d'événements onload et ne nécessite aucune autre modification du code-source HTML. Le script recherche les nœuds contenus dans le ul id="menu" et affiche les éléments ul emboîtés par la propriété CSS display lors du survol de la souris (onmouseover) et les cache lorsque la souris a passé (onmouseout). Cela demande cependant un changement supplémentaire de la couleur d'arrière-plan (backgroundColor).
Pour exclure Internet Explorer 7 de ce script, vous pouvez introduire un commentaire conditionnel (<!--[if lt IE 7]> <![endif]-->), si vous renoncez à l'ancienne version Macintosh.
Comme l'interprétation du JavaScript ne peut pas être garantie, et que d'autres anciens navigateurs n'affichent pas les sous-menus, cette fonctionnalité ne devrait être employée qu'en complément. Vous ne devriez donc pas renoncer aux liens vers des pages alternatives présentés dans l'exemple ci-dessus.
|
| |
 |
Aiguillages CSS pour écarter d'anciens navigateurs
|
 |
Domaines fixes avec les CSS
|
 SELFHTML/Aides à la navigation Feuilles de style CSS Mise en page avec les CSS |
|
© 2007 Redaktion SELFHTML / © 2007 Traduction Beate Niklewicz
selfhtml@fr.selfhtml.org