.menu-general { /* défini les boites qui comprenent chaque menu
de base */
float:left ; /* Les boite sont calées à gauche
*/
width:19% ; /* largeur des boites du menu de base */
padding:0 ; /* marges intérieures à 0 */
margin: 0 ; /* marges extérieures à 0 */
height:20px} /* Hauteur des boites */
#sous-menu1, #sous-menu2, #sous-menu3 { /*défini les 3 boites
des 3 sous-menues */
display: none; /* les sous-menus ne sont pas affichés
*/
margin: 0; /* marges extérieures à 0 */
padding : 0; /* marges intérieures à 0 */
position : absolute ; /* boite positionnée par rapport
à la boite parent, ici l'écran */
top : 19px; /* Début (par rapport au haut de page)
des sous-menus */
left : 0px; /* Début (par rapport à la gauche
de la page) des sous-menus */
width : 19%} /* largeur des sous-menus par rapport à
la boite parent (ici la page)*/
#sous-menu2 {left:20%} /* Distance à la gauche de la page du 2ième sous-menu */
#sous-menu3 {left:39%} /* Distance à la gauche de la page du
3ième sous-menu */
</style>
<script type="text/javascript" src="menu.js"></script>
<!-- appel du JS qui gère l'affichage des sous-menus -->
</head>
<body>
<div class="menu-general" onmouseover="montre('sous-menu1');"
onmouseout="cache('sous-menu1');">Menu 1</div> <!--
indique au JS que lorsque la sourie survol la 1er boite "menu-général",
il faut montrer le sous-menu1, et sinon, il faut le cacher -->
<ul id="sous-menu1" onmouseover="montre('sous-menu1');"
onmouseout="cache('sous-menu1');"> <!-- indique au JS
que lorsque la sourie survol la boite "sous-menu1", il faut montrer
le sous-menu1, et sinon, il faut le cacher -->
<li><a href="#">Sous-menu1 1</a></li>
<!-- 1er ligne du sous-menu -->
<li><a href="#">Sous-menu1 2</a></li>
<!-- 2ième ligne du sous-menu -->
<li><a href="#">Sous-menu1 3</a></li>
<!-- 3ième ligne du sous-menu -->
</ul>
<div class="menu-general" onmouseover="montre('sous-menu2');"
onmouseout="cache('sous-menu2');">Menu 2 </div><!--
idem précédent -->
<ul id="sous-menu2" onmouseover="montre('sous-menu2');"
onmouseout="cache('sous-menu2');">
<li><a href="#">Sous-menu2 1</a></li>
<li><a href="#">Sous-menu2 2</a></li>
<li><a href="#">Sous-menu2 3</a></li>
</ul>
<div class="menu-general" onmouseover="montre('sous-menu3');"
onmouseout="cache('sous-menu3');">Menu 3</div> <!--
idem précédent -->
<ul id="sous-menu3" onmouseover="montre('sous-menu3');"
onmouseout="cache('sous-menu3');">
<li><a href="#">Sous-menu3 1</a></li>
<li><a href="#">Sous-menu3 2</a></li>
<li><a href="#">Sous-menu3 3</a></li>
</ul>
</body>
</html>
COMMENTAIRES
Sur le principe, la pseudo-classe hover permet de construire des menus déroulants sans aucun JavaScript. Hélas, il faut pour cela utiliser hover sur des balises <div> ou <li>. Et nternet Explorer a ici aussi un bug qui rend la chose impossible (il ne sait l'utiliser que sur <a>). Ces menus CSS purs ne marchent donc que dans Mozilla, Opéra ou Konquéror. Pas sous IE.
Nous construisons donc ici un menu CSS assisté par JavaScript (JS). Le programme utilisé (menu.js) remplace en fait la fonction hover défaillante d'IE, en masquant ou affichant les sous-menus, selon le survol à la sourie.
Il n'est pas nécessaire de connaître le JavaScript pour construire un menu déroulant : on peut utiliser menu.js tel quel, sans rien y modifier. N'hésitez pas à le télécharger.
Le menu CSS utilisé ici est "nu". Les fonctions CSS sont les fonctions minimales pour que le menu marche. Vous trouverez sur la page suivante un exemple d'habillage.
Un avertissement : les menus JavaScript ne marchent que... si votre visiteur a JavaScript fonctionnel et activé. D'après différentes études, une bonne dizaine de % des internautes ne seraient pas dans ce cas. Votre menu ne doit pas rendre la navigation impossible, prévoyez une alternative.
Voyons maintenant la construction CSS :
. On crée d'abord une boite pour chaqu'un des 3 menus principaux.
- On crée ensuite 3 boite "#sous-menu" pour chacun des 3 sous-menus, et on en cache l'affichage par un display:none. C'est le JS qui fera réapparaitre ces sous-menus lors du survol, puisqu'on ne peut le faire par un hover dans IE.
- Il faut être précis sur la jonction des boites ".menu" et "#sous-menu". Il faut qu'elles se recouvrent d'au moins 1 pixels, sinon, il y aura un moment ou la sourie ne sera ni sur l'une ni sur l'autre en descendant du menu dans son sous-menu. Le JS étant chargé de cacher le sous-menu quand il n'y a pas de survol, le sous-menu disparaitra. Pour être sur que la boite #sous-menu parte bien du bas de la boite menu au pixel prêt, il faut définir (ici à 0) les marges (margin et padding) du body et du .menu. Il faut aussi bien définir la hauteur de la ligne (ici, 20 pixels). En effet, chaque navigateur donne une valeure par défaut qui lui est propre aux marges ou aux hauteurs de lignes. Résultat, on ne sait pas avec certitude ou se finie la boite menu. Ici, c'est clair, elle se termine à 20 pixels du haut de page. On fait donc partir les boites #sous-menu à 19 pixels du haut (top:19px).
- On donne enfin aux boites #sous-menu2 et 3 une position par rapport à la gauche qui change, afin que chaque sous-menu reste bien sous son menu.
- Pour éviter que les boites sous-menu soient trop collées sous les boites menu, on leur donne donne un padding (une marge intérieur) haut de quelque pixels.
- Dans le body, on construit les boites, en indiquant par des fonctions JS onmouseover et onmouseout ce qu'on montre ou ce qu'on cache quand on survol une boite ou qu'on la quitte.
Ne marche pas dans Netscape 4.
Le programme JS vient du site Irizoo.
Un autre exemple de menu JS + CSS sur le site Openweb.