Enseignement > Web dynamique > TP n°5 - Menu en CSS  

Menu dynamique en CSS (sans javascript)

1. Une structure de menu en html

On construis un menu en html avec sous forme d'une liste imbriquée avec les balises ul et li.
On commence par ouvrir la balise ul qui marque le début de la liste, puis on place des balises li pour structurer le menu.
On peut créer des sous-menus en intégrant des balises ul à l'intérieur des balises li

<div id="menu">
   <ul>
      <li><a href="#">menu 1</a></li>
      <li><a href="#">menu 2</a>
         <ul>
            <li><a href="#">Sous menu 2.1</a></li>
            <li><a href="#">Sous menu 2.2</a></li>
         </ul>
      </li>
      <li><a href="#">menu 3</a></li>
      <li><a href="#">menu 4</a>
         <ul>
            <li><a href="#">Sous menu 4.1</a>
               <ul>
                  <li><a href="#">Sous sous menu 4.1.1</a></li>
                  <li><a href="#">Sous sous menu 4.1.2</a></li>
                  <li><a href="#">Sous sous menu 4.1.3</a></li>
               </ul>
            </li>
            <li><a href="#>Sous menu 4.2</a></li>
         </ul>
      </li>
      <li><a href="#">menu 5</a></li>
   </ul>
</div>

Ce qui nous donne ceci:

2 Préparation pour le style CSS


On applique des classes aux elements de même niveau dans la liste (menu, sousmenu) pour appliquer des propriétés groupées avec css
Ensuite on applique une class aux balise li qui vont sont racines de sous menus.

<div id="menu">
   <ul class="niveau1">
      <li><a href="menu 1">menu 1</a></li>
      <li class="sousmenu"><a href="menu 2">menu 2</a>
         <ul class="niveau2">
            <li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
            <li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
         </ul>
      </li>
      <li><a href="menu 3">menu 3</a></li>
      <li class="sousmenu"><a href="menu 4">menu 4</a>
         <ul class="niveau2">
            <li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
               <ul class="niveau3">
                  <li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
                  <li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
                  <li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
               </ul>
            </li>
            <li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
         </ul>
      </li>
      <li><a href="menu 5">menu 5</a></li>
   </ul>
</div>

3 Mise en forme avec CSS

/*on definit la taille de la div du menu ainsi que la taille de parties du menu.*/

div#menu { width: 100px; }

div#menu ul {
  padding: 0;
  width: 100px;
  border:1px solid;
  margin:0px;
  }

/*On positionne les elements du menu */
div#menu ul li {
  position:relative;
  list-style: none; /*on enleve les icones de liste */
  border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}

div#menu ul ul {
  position: absolute;
  top: 0;
  left: 100px; /*100px correspond au d calage a droite, on d cale de la taille du ul de base*/
}  

div#menu li a {
  text-decoration: none; /* plus de soulignement pour les liens */
}
 
Puis on cache tous les sous menu avec la propriété display: none
 
div#menu ul ul {
  position: absolute;
  top: 0;
  left: 100px;
  display:none
}

Lors du survol avec la souris, on fait apparaitre les sousmenus grâce à la propriété display: block

div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 { display:block; }

 

4 Styler l'ensemble pour rendre le menu élégant

/* fond blanc pour le menu */

div#menu a { color:#000000 }

/* fond different au survol de la souris entre les sous-menu et les "basiques"*/
div#menu li:hover { background: #EDD }

div#menu li.sousmenu:hover { background: #EBB; }

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */
div#menu li a {
  text-decoration: none;
  padding: 4px 0 4px 8px;
  display:block; border-left:
  8px solid #BBB; width:84px
}

/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {  border-left-color: red; }
div#menu ul ul li a:hover {  border-left-color: #00FF00; }
div#menu ul ul ul li a:hover { border-left-color: #0000FF; }

 

Voir le résultat