Partie 1 (partie 2)

Tutorial menu déroulant en css

compatible tout navigateurs et sans javascript

logo cssVous commencer un site web, il va bien vous falloir un menu :D
Pourquoi ne pas en faire un déroulant, animé, en CSS et pourquoi pas sans javascript ... et compatible tout navigateurs (firefox, intenet explorer, safari.. )

Je vais donc vous guider pour faire votre menu deroulant en css (vertical ou horizontal) sans utiliser js.

1://Une ébauche de menu simpliste sans fioritures.

On construis donc notre menu en html avec les balises ul et li habituelles.
On commence par ouvrir la balise ul
On place nos balises li
Et pour faire des sous menu on place une balise <li>, on rajoute une balise <ul> suivis de " <li> sous menu </li>" puis on ferme la sous liste avec </ul> et enfin on ferme le li </li>
Et faites de meme en cas de sous sous menu. Et même pour les sous sous sous menu :D

<div id="menu">
   <ul>
      <li><a href="menu 1">menu 1</a></li>
      <li><a href="menu 2">menu 2</a>
         <ul>
            <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><a href="menu 4">menu 4</a>
         <ul>
            <li><a href="Sous menu 4.1">Sous menu 4.1</a>
               <ul>
                  <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>

Ce qui nous donne ceci:

2:// Préparation pour le style CSS

On apllique des classe aux element de meme "hauteur" dans la liste (menu, sousmenu) pour appliquer des propriétés groupées avec css :D
Cela va nous aider à ne pas retapé 30 fois les meme choses et à rendre notre menu deroulant en css évolutif

On classe donc les listes suivant different niveaux; niveau1, 2 et 3 qui represente la profondeur horizontale de la liste.
Ensuite applique une class aux balise li qui vont etre racines de sous menu elles aussi.


<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>

Rien ne change donc pour la presentation.

3:// Mise en page avec CSS

Finis la rigolade mise en page sommaire, on prépare le terrain:

/*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 */
              }

Ce qui nous donne une première mise en page du menu

On va maintenant se servir des classes que l'on a créé précedemment:
On applique un fond different pour les "li sousmenu" juste pour les reconnaitre et comprendre un peu, cette étape ne sert fondamentalement à rien pour la finalité.

/*fond jaune pr les sous-menu*/
div#menu li.sousmenu {
                      background: yellow;
                     }

Voir le resultat

On insere ensuite dans le css un petit fichier qui va servir a internet explorer pour les propriétées hover (car il ne supporte pas les propriétées css2 on utilise donc les behavior )
Grace à ce petit fichier, on va pouvoir cacher ou montrer certaines parties du menu en fonction du survol de ceux ci par la souris. (hover). Il ne sera utilisé que par ie, les autres navigateurs n'auront pas besoin de js et avec la venu de ie7 il deviendra bientot inutile.

On insere donc ce fichier dans le CSSt. Il suffit de le copier ensuite dans le meme repertoire que la page.

/* fichier pour internet explorer */
body {
      behavior: url(csshover.htc);
     }


/* 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, les sousmenu apparaissent grace a display: block */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
                                                  display:block;
                                                 }

Et voila on a notre menu animé en css!!             telecharger le css le fichier csshover.htc

Si vous l'executer en local, il se peut que vous ayez une alerte de sécurité mais celle ci ne se produira pas une fois en ligne car le fichier csshover.htc ne sera pas local ;)

4:// On va rendre tout ca un peu plus joli (au moin on va essayer :D )

Fond blanc pour le menu, fond different au survol, rajout d'une fleche, reglage des bordures ...

/* 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;
                           }

/* Rajout d'une petite fleche pour les sous menu (j'ai pioché cette astuce sur le web ;) )*/
div#menu li.sousmenu {
                      background: url(fleche.gif) 95% 50% no-repeat;
                     }

/* 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;
                             }

Et voila deja un petit résultat. telecharger le css

Tutoriaux photoshop
© Copyright 2005-2006 Tuto-fr.com par Billyboylindien
Déclaré à la cnil: Dossier n° 1142196
Rc v2.0