 Retrouvez cet article dans : Linux Pratique 41
Dans ce didacticiel, nous allons concevoir un menu déroulant vertical à l'aide des CSS et d'un soupçon de Javascript. Les menus verticaux sont fréquemment utilisés par les concepteurs de sites Web, car ils garantissent une certaine ergonomie du site (toutes les pages du site sont localisées dans ce menu, et l'utilisateur peut naviguer facilement).
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 onclick de Javascript. Une alternative aurait été de faire apparaître les sous-entrées du menu au survol de la souris, qui se traduit par la déclaration de la pseudo-classe li:hover dans la CSS. Cependant, le navigateur Internet Explorer ne reconnaît la pseudo-classe :hover que si elle s'applique au sélecteur de la balise <a>.
Le script que nous allons utiliser est vraiment simple. On l'insère comme toujours dans l'en-tête du fichier HTML, entre des balises <script> :
<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 mention style.display='none'). Puis, lorsque la fonction est appelée, autrement dit, dès que l'utilisateur cliquera sur l'une des entrées du menu, alors les sous-entrées correspondantes
apparaîtront à l'écran.
La méthode getElementById() permet d'accéder à l'élément HTML dont l'attribut id est celui indiqué en paramètre.
La propriété style permet d'accéder à l'attribut style, qui permet de définir un style pour un élément HTML. Dans ce script, on modifie la propriété de l'élément qui concerne son positionnement : style.display='none' (par défaut, l'élément n'est pas apparent) devient style.display='block' (lorsque la fonction Javascript est activée, l'élément apparaît à l'écran, tel qu'un élément de type bloc).
Le 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 <li>, via l'évènement onclick (dès que l'utilisateur clique sur l'élément <li>). La fonction show() prend alors en paramètre l'identifiant du sous-menu correspondant (ici, smenu1, smenu2, etc.), identifiant que l'on doit retrouver comme attribut de la balise <ul> suivante.
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 float: left;, l'ensemble du menu est positionné en flottant et doit s'afficher du côté gauche de son parent (dans notre cas, il s'agit du conteneur <div> d'identifiant " bloc "). La largeur du menu définie ici est complètement arbitraire, à vous de l'adapter à vos besoins. Un padding-top est également appliqué de façon à positionner le menu au même niveau que le titre de notre page (ceci est facultatif...).
Remarquez par ailleurs que nous avons choisi d'inclure le bloc de menu et le bloc de contenu dans un seul et même conteneur global, pour lequel on définit une largeur précise. Ceci, de manière à pouvoir positionner le menu et le contenu de la page comme nous le souhaitons et que l'affichage soit correct à la fois sous Firefox et sous Internet Explorer. Ainsi, il ne nous reste plus qu'à positionner le bloc " contenu " en flottant, à droite, à l'aide de la mention float: right; (sans cette précision, le contenu du bloc " s'écoule " tout autour du menu dans Firefox (Fig. 1)).
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
