 Retrouvez cet article dans : Linux Pratique 41
Pourquoi utiliser Javascript ?
Notre menu se compose de plusieurs entrées, qui elles-mêmes comportent des sous-entrées. Or, nous souhaitons que ces dernières n'apparaissent à l'écran que lorsque l'utilisateur clique sur l'entrée parente (d'où la notion de menu " déroulant "). Ce type de comportement peut être obtenu facilement grâce à l'évènement<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
// -->
</script>
La fonction utilisée dans ce script est basée sur la reconnaissance de l'identifiant des éléments contenus dans le document. En effet, dans un premier temps, tous les éléments, dont l'identifiant correspond à la chaîne de caractères " smenu ", ne doivent pas être visibles à l'écran (d'où la mentionLe code HTML
Notre menu va être codé sous forme d'une liste non ordonnée, dont les différentes entrées et sous-entrées seront des liens hypertextes (censés pointer vers la page correspondante du site, mais nous nous contenterons ici de renvoyer ces liens sur la page courante, en utilisant le signe <body>
<div id="bloc">
<div id="menu_gauche">
<ul id="liste">
<li onclick="javascript:show('smenu1');"><a href="#">La société</a>
<ul id="smenu1">
<li><a href="#">Notre équipe</a></li>
<li><a href="#">Nos objectifs</a></li>
<li><a href="#">Actualités</a></li>
</ul>
</li>
<li onclick="javascript:show('smenu2');"><a href="#">Nos filiales</a>
<ul id="smenu2">
<li><a href="#">Espagne</a></li>
<li><a href="#">Allemagne</a></li>
<li><a href="#">Italie</a></li>
<li><a href="#">Belgique</a></li>
</ul>
</li>
<li onclick="javascript:show('smenu3');"><a href="#">Nos produits</a>
<ul id="smenu3">
<li><a href="#">Produit A</a></li>
<li><a href="#">Produit B</a></li>
<li><a href="#">Produit C</a></li>
<li><a href="#">Produit D</a></li>
<li><a href="#">Produit E</a></li>
</ul>
</li>
<li onclick="javascript:show('smenu4');"><a href="#">Contacts</a>
<ul id="smenu4">
<li><a href="#">Service Commercial</a></li>
<li><a href="#">Presse</a></li>
<li><a href="#">Service Après Vente</a></li>
</ul>
</li>
</ul>
</div>
<div id="contenu">....</div>
</div>
</body>
Remarquez que notre script est invoqué à chaque entrée principale du menu, dans la balise Des boutons en relief
Pour donner un peu plus d'originalité à notre menu, nous allons faire en sorte qu'il apparaisse sous forme d'une série de boutons en relief. Cet aspect de relief va être obtenu grâce à une utilisation adéquate des couleurs. Tout d'abord, détaillons certaines des propriétés CSS employées...#bloc {
width: 950px;
}
#menu_gauche {
float: left;
width: 200px;
padding-top: 70px;
}
Avec la mention 
Fig.1
#contenu {
float: right;
padding: 1.5em;
width: 650px;
}
Remarque : Nous aurions pu positionner le bloc " contenu " en absolu. Mais nous aurions été alors obligés de préciser une marge de gauche pour cet élément (égale à la largeur du menu), ce qui fonctionne sous Firefox 2.0, mais qui provoque un énorme décalage sous IE 7.0 (qui comptabilise la marge à partir de la bordure droite du menu et non à partir de son élément parent).
#liste {
margin: 0;
list-style-type: none;
padding: 0.3em 0.5em;
width: 100%;
}
#liste li {
list-style-type: none;
margin: 0.5em 0;
}
Étant donné que notre menu est basé sur une imbrication de listes non ordonnées, nous utilisons comme toujours la mention list-style-type: none; qui permet de supprimer les puces de la liste.
Le réglage des marges intérieures (padding) et extérieures (margin) reste comme toujours à votre appréciation personnelle. On pensera ici à fixer toutes les marges à 0, de manière à supprimer la marge appliquée par défaut sous IE 7.0.
Notez que l'on ne définit ici qu'une seule fois les marges intérieures, ici pour le sélecteur #liste, qui se trouve être le conteneur global de toutes les entrées du menu. Ainsi, chaque élément de la liste sera présenté de la même manière, car ils héritent de cette propriété.
#liste li a {
text-align: center;
display: block;
border-width: 1px;
border-color: #FFDAB9 #A0522D #A0522D #FFDAB9;
border-style: solid;
text-decoration: none;
color: #000;
background: #D2B48C;
}
 La mention display: block; appliquée au sélecteur a est tout simplement indispensable. En effet, par défaut, les liens hypertextes sont des éléments de type en ligne (Fig. 2), qui suivent le flux du texte en se plaçant les uns à la suite des autres (et non les uns en dessous des autres, comme on le souhaiterait pour notre menu).
Notez l'utilisation de text-decoration: none;, qui permet de supprimer le soulignement caractéristique des liens. N'oublions pas de préciser une mention de couleur (ici noir), car, par défaut, les liens hypertextes adoptent la couleur spécifiée dans les préférences du navigateur Web de l'utilisateur.
Venons-en à notre effet de relief. Constatez que nous avons utilisé la propriété border-color afin de pouvoir attribuer une couleur différente à chacune des 4 bordures des éléments de listes. Plus précisément, pour obtenir un aspect " bouton en relief ", l'astuce est d'utiliser une même couleur, claire, pour les bordures gauche et supérieure et une autre couleur, de même teinte, mais plus foncée, pour les bordures droite et inférieure.
Puis, pour définir les liens survolés par la souris (sélecteur a:hover), il faudra faire exactement l'inverse : une couleur claire pour les bordures droite et inférieure, une couleur foncée pour les bordures gauche et supérieure. De cette façon, l'utilisateur a l'impression que le bouton s'enfonce au passage de la souris (voir le résultat final sur la figure 3).
#liste li a:hover {
color: #fff;
background: #4682B4;
border-color: #000080 #87CEEB #87CEEB #000080;
}
Pour finir, on choisit d'attribuer une couleur différente aux sous-entrées du menu, comme suit :
#smenu1 li a, #smenu2 li a, #smenu3 li a, #smenu4 li a{
background: #FFDAB9;
font-size: 0.9em;
}
 Remarques
- Ces fichiers HTML et CSS ont été testés sous Firefox 2.0 et Internet Explorer 7.0.
- L'inconvénient majeur de cette technique, ne l'oublions pas, est que les sous-menus n'apparaissent que grâce à l'intervention de Javascript. Or, si l'utilisateur a désactivé l'interprétation de Javascript pour son navigateur, il n'aura pas accès à l'intégralité du menu...
Fig. 2
Fig.3
 Retrouvez cet article dans : Linux Pratique 41
Bonjour, Ce code est sympa mais je n’arrive pas à ajouter un niveau supplémentaire de menu soit menu, sousmenu1, sousmenu2.
Merci pour la réponse