Tutorial menu deroulant en CSS Partie2 (partie 1):


logo cssIci, on va attaquer les options dites avancée pour le menu. On va voir comment en faire un menu horizontal puis comment gérer les multi dimension car toutes les case de menu ne contiennent pas les meme choses. Dans cette partie on va donc pas mal bidouiller le code css, cela nécessite des conaissances un peu plus evoluées mais rien d'insurmontable (non vrt rien de bien dur) ;).

Tout le Wifi chez Wifi-Highpower: cartes, antennes, routeurs, Alfa Network, Awus036H...

1://Menu déroulant css horizontal

Hop on passe à l'horizontal ?? (non mesdemoiselles ne le prennez pas mal ;-) ).
Mettre le menu à l'horizontal en soit ne va pas être difficile, vraiment pas, on change en gros juste le float et on enlève les limitation de taille et de décalages qui vont être differents.

Première chose on enlève la restriction de taille du menu et des ul afin qu'ils puissent s'allonger.
La seconde chose importante est la suppression du float à gauche, il va maintenant se faire en bas. On en profite pour enlever la petite correction de 1px que l'on avait introduite.
Enfin, les sous sous menus eux se décallent toujours sur la gauche donc on leur remet un float left.
Puis pour clarifier un peu les chose on vire toutes les bordures... ca va charcler.

Le code du menu lui ne change pas d'un brin, seul le CSS change:

body {behavior: url(csshover.htc);}
/*on enleve la restriction de taille du menu*/
div#menu {/*width: 100px;*/}
div#menu a {color:#000000}
/* on enleve la taille de ul et labordure*/
div#menu ul {padding: 0;/* width: 100px; border:1px solid;*/ margin:0px; background: white}
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}

/* float left pour les li afin d'aligner le menu et plus de bordures*/
div#menu ul li {position:relative; list-style: none;/* border-bottom:1px solid;*/ float:left;}

/* le d calage n'est plus a gauche maintenant mais en bas on annule donc le decalage a gauche et la correction en haut et on place la restriction de taille*/
div#menu ul ul {position: absolute;/* top: -1px; left: 100px; */display:none; width:100px}

/* plus de bordure et taille remise a 100px*/
div#menu li a {text-decoration: none; padding: 4px 0 4px /*8px*/; display:block; /*border-left: 8px solid #BBB; */width:100px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

/*Il faut decaller les soussous menu de la taille du sous menu */
div#menu ul.niveau3 {top:0; left: 100px;}

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

Ce qui nous donne cette mise en page avec menu horizontal de base

2:// Ajustements du menu dynamique

Tout le Wifi chez Wifi-Highpower: cartes, antennes, routeurs, Alfa Network, Awus036H...

Un petit coup de bistouris ne ferais pas de mal non ;)

On voit dans l'aperçut precendent que c'est pas top. On va pas s'éterniser sur la presentation mais on va modifier 2 3 trucs.
Apres à vous de paufiner ce menu CSS horizontal.

On va mettre des flèches descendantes pour les premiers sous menu et rajouter 2 3 bordures de ci de là ainsi que des fonds. Rien de bien méchant ni de très esthétique (à vous de taffer un peu ;) ). Par contre ici on modifie un chouilla le code du menu, rien de bien grave on rajoute 2 class et zou ;)

<div id="menu" style="margin-left:150px;">
<ul class="niveau1">
<li><a href="lien">menu 1</a></li>
<li class="sousmenu , plop"><a href="lien">menu 2</a>
<ul class="niveau2">
<li><a href="lien">Sous menu 2.1</a></li>
<li><a href="lien">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="lien">menu 3</a></li>
<li class="sousmenu , plop"><a href="lien">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="lien">Le sous menu 4.1</a>
<ul class="niveau3">
<li><a href="lien">Sous sous menu 4.1.1</a></li>
<li><a href="lien">Sous sous menu 4.1.2</a></li>
<li><a href="lien">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="lien">Le sous menu 4.2</a></li>
</ul>
</li>
<li><a href="lien">menu 5</a></li>
</ul>
</div>

Et v'la le CSS pour le menu:

body {behavior: url(csshover.htc);}
div#menu a {color:#000000}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#CCCCCC}
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}

/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid}

div#menu ul ul {position: absolute;display:none; width:100px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:100px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 100px;}

/* rajout de couleures de fond et de survol */
div#menu ul.niveau3 li { background: #99CCCC}
div#menu ul.niveau3 li:hover { background: #99CC00}

Et voila le resultat rien de bien beau mais à vous de taffer un peu ;) vous avez les grandes lignes.
Ne faites pas comme moi utilisez des images avec fond transparent pour les fleches :D

La mise en page du menu CSS horizontal avec 2 3 trucs. Télecharger le CSS

3:// Gérer les differentes tailles de sous menu avec CSS:

Un menu c'est bien beau mais comment faire lorsque l'on a des sous-menu de differentes tailles (certain avec 10 15 caractères les autres avec 20 25 ...)
Ba la rien de mieux que de créer encor et encor des classes. Ca fou un peu le brouaras et le mieux est de voir le code.

Je vous donne le code de mon menu il est commenté, rien de bien sorcier.

Le code HTML du menu déroulant vertical

<ul class="niveau1">
    <li><a href="http://www.tuto-fr.com">Acceuil</a></li>
    <li class="sousmenu"><a href="http://www.tuto-fr.com/tutoriaux/tutoriaux.php">Tuto</a>
      <ul class="niveau2">
        <li><a href="http://www.tuto-fr.com/tutoriaux/tutorial-crack-wep-aircrack.php">Crack de clef wep</a></li>
        <li><a href="http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php">Menu deroulant en CSS</a> </li>
        <li class="sousmenu"><a href="http://www.tuto-fr.com/tutoriaux/tutorial-daemon-tool.php">Daemon tool</a>
            <ul class="niveau3">
              <li><a href="http://www.tuto-fr.com/tutoriaux/tutorial-daemon-tool.php#tutoenimage">Tuto en image</a></li>
            </ul>  
        <li><a href="http://www.tuto-fr.com/tutoriaux/tutorial-float-mobil-agent.php">Float's mobile agent  </a></li>
        <li><a href="http://www.tuto-fr.com/tutoriaux/advanced-pdf-password-recovery/tutorial-crack-pass-pdf-french.php">Pdf pass recovery</a> </li>
      </ul>
    </li>
    <li class="sousmenu"><a href="http://www.tuto-fr.com/futur/index.php">A venir</a>
      <ul class="niveau2bis">
        <li><a href="http://www.tuto-fr.com/futur/futur-tuto.php">Tutoriaux</a></li>
        <li><a href="http://www.tuto-fr.com/futur/futur-autre.php">Autre</a></li>
      </ul>
    </li>
    <li><a href="http://www.tuto-fr.com/videos.php">Vid os</a></li>
    <li><a href="http://forum.tuto-fr.com/" target="_blank">Forum</a></li>
    <li><a href="http://www.tuto-fr.com/about.php">A propos</a></li>
  </ul>

Tout ca accompagné de ce code CSS . Les em sont une unité de mesure tout comme les pixels, vous pouvez parfaitement faire de meme avec des pixels !

/*----------------MENU-----------------*/
div#menu a{color: #000000; font-weight:bold;}
div#menu li {position: relative; list-style:none; margin:0px; border-bottom: 1px solid #CCC;}
div#menu li.sousmenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#menu li:hover {background: #EBB;}
div#menu li.sousmenu:hover {background-color: #EDD;}
div#menu ul a {width: inherit;}
div#menu ul ul {position: absolute; top: -1px;}

/*TAILLE PREMIERE COLONNE*/
div#menu {float: left; width: 7em;}
div#menu ul {margin: 0; padding: 0; width: 7em; background: white; border: 1px solid;}
div#menu ul ul {left: 7em; display:none}
div#menu li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 7em; border-left: 0.5em solid #BBB;}

/*TAILLE DEUXIEME COLONE*/            
div#menu ul.niveau2 ul {left: 13em;}  
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {width:13em; display:block}
div#menu ul.niveau2 li a {width: 13em;}

/*TAILLE TROISIEME COLONNE*/
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {width:10em; display:block;}      

/*TAILLE DEUXIEME COLONE BIS*/                
div#menu ul.niveau2bis ul {left: 10em;}  
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2bis {display:block; width:10em;}      
div#menu ul.niveau2bis li a {width: 10em;}


/*COULEUR DES BORDURES*/
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 resultat

Observez bien la différence de taille entre les sous menu A venir et Tuto. Rien de bien sorcier. Vous voila maintenant parré à faire votre menu deroulant CSS compatible ie , firefox netscape et compagnie ;);)

telecharger le css

Liens :

Menu avec javascript:
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal

Menu en css sans javascript mais que pour navigateur évolués, ne fonctionne pas avec ie
http://marcarea.com/tuto/menu01.php

Une autres methode avec des table interressante mais la venue de ie 7 va poser des soucis à cette méthode
http://peutetreunereponse.over-blog.com/categorie-295412.html



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