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);}
div#menu {}
div#menu a {color:#000000}
div#menu ul {padding: 0; 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;}
div#menu ul li {position:relative; list-style: none; float:left;}
div#menu ul ul {position: absolute;display:none; width:100px}
div#menu li a {text-decoration: none; padding: 4px 0 4px ; display:block; }
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:0; left: 100px;}
Ce qui nous donne cette mise en page avec menu horizontal de base
2:// Ajustements du menu dynamique
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;}
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}
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;}
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 !
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;}
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;}
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;}
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {width:10em; display:block;}
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;}
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