Menu JavaScript + CSS, avec habillage

CODE SOURCE CSS ET HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0 ; padding:0} /* marges intérieures et extérieures de la page à 0 */

.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 : 2%; /* Début (par rapport à la gauche de la page) des sous-menus */
  width : 19%} /* largeur sous-menus par rapport à la boite parent (ici la page) */

#sous-menu2 {left:22%} /* Distance à la gauche de la page du 2ième sous-menu */

#sous-menu3 {left:42%} /* Distance à la gauche de la page du 3ième sous-menu */

/*********************************************************************/
/* début de l'habillage du menu déroulant - On aurait pu rentrer cet habillage dans*/
/* les #sous-menus1 2 ou 3, mais pour une meilleure lisibilité, on crée un style    */
/* ".habillage", qu'on rajoute ensuite dans les appels des sous-menus.                   */
/*********************************************************************/
.menu-general {background-color:#CCCCCC ; color:black ; border:solid 1px black ; padding-left:1% ; padding-bottom : 1% ; font-weight:bolder ; font-style:italic ; text-align:center ; position:relative} <!-- habillage du Menu Général de la 1er ligne -->

.habillage {border:solid 1px black ; border-left:solid 20px #E7E4E4 ; background-color:#FFD5AA ; color:black ; text-align:normal ; font-style:normal; font-weight:normal}
<!-- habillage des 3 sous-menus -->

.habillage li {list-style:none ; border-bottom:solid 1px black ; height : 20px} <!-- habillage des listes contenues dans les 3 sous-menus -->

.habillage a {text-decoration:none} <!-- les liens ne sont pas soulignés -->

.habillage a:hover {background-color : #AFB7D3}<!-- couleur des liens survolés -->

</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> <!-- idem menu sans habillage -->
<ul id="sous-menu1" class="habillage" onmouseover="montre('sous-menu1');" onmouseout="cache('sous-menu1');"> <!-- idem menu sans habillage -->
    <li><a href="#">Sous-menu1 1</a></li> <!-- idem menu sans habillage -->
    <li><a href="#">Sous-menu1 2</a></li> <!-- idem menu sans habillage -->
    <li><a href="#">Sous-menu1 3</a></li> <!-- idem menu sans habillage -->
</ul>

<div class="menu-general" onmouseover="montre('sous-menu2');" onmouseout="cache('sous-menu2');">Menu 2</div> <!-- idem précédent -->
<ul id="sous-menu2" class="habillage" 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" class="habillage" 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>

Pour tester ce script


COMMENTAIRES

Idem menus sans habillage de la page précédente. On a simplement ajoutés des habillages, couleurs, encadrements, sur les menus et sous-menus.
Seule petite subtilité : on a rajouté un position:relative dans le style de .menu-general. Cela fait disparaitre une partie des sous-menus sous les menus. Ce qui ne sert à rien, sauf pour l'effet visuel. Cet effet visuel ne marche que dans IE et les navigateurs Gecko (Firefox, Netscape, Mozilla), mais pas dans Opéra.

Ne marche pas dans Netscape 4.

Le programme JS vient du site Irizoo. Pour télécharger menu.js

Un autre exemple de menu JS + CSS sur le site Openweb.