Pages :: 1
re-salut - Hello,
voilà en fait j'ai besoin d'un quatrième niveau de profondeur sur le super menu génialement cool de tuto-fr, is it possible ?
J'ai fait un test sans résultat :
voilà comment j'ai modifié le css :
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4
div#menu ul.niveau4 {top:1px; left: 81px;}
je me suis dit que cela permettrait un quatrième niveau ... mais quand je l'appelle avec une class="niveau4" via mon html, il n'entend rien le bougre !!
Est - ce quelque aurait une bonne âme pour m'aider ...
merci merci
à bientôt,
ilofr
(désolée si je me répète dans le thème detout de rien)
Hors Ligne
J'ai modifier légèrement le code source de l'exemple du menu trouvé sur le tuto, et pour un niveau 4, voici le code :
Avant (avec 3 niveaux):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css4.css" rel="stylesheet" type="text/css" />
<title>Mise en page avec fond pour sous menu</title>
</head>
<body>
<div id="menu" style="margin-left:150px;">
<ul class="niveau1">
<li><a href="mise_en_page_4.php">menu 1</a></li>
<li class="sousmenu"><a href="mise_en_page_4.php">menu 2</a>
<ul class="niveau2">
<li><a href="mise_en_page_4.php">Sous menu 2.1</a></li>
<li><a href="mise_en_page_4.php"">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 3</a></li>
<li class="sousmenu"><a href="mise_en_page_4.php">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.2</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php"">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 5</a></li>
</ul>
</div>
</body>
</html>
le css correspondant :
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}
/* fond blanc pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
/* fond different au survol de la souris pour 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 */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
/* 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}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
/* 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;}
Avec 4 niveaux :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Mise en page avec fond pour sous menu</title>
</head>
<body>
<div id="menu" style="margin-left:150px;">
<ul class="niveau1">
<li><a href="mise_en_page_4.php">menu 1</a></li>
<li class="sousmenu">
<a href="mise_en_page_4.php">menu 2</a>
<ul class="niveau2">
<li><a href="mise_en_page_4.php">Sous menu 2.1</a></li>
<li><a href="mise_en_page_4.php"">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 3</a></li>
<li class="sousmenu">
<a href="mise_en_page_4.php">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous menu 4.1</a>
<ul class="niveau3">
<li class="sousmenu"><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a>
<ul class="niveau4">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.2</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php"">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="mise_en_page_4.php">menu 5</a></li>
</ul>
</div>
</body>
</html>
et le css :
body {behavior: url(csshover.htc);}
div#menu {width: 100px;}
/* fond blanc pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 100px; border:1px solid; margin:0px; background: white}
/* fond different au survol de la souris pour 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 */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 100px; display:none}
/* 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}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
/* 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 change, dans le css c'est plus :
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
Mais
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3,div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {display:block;}
et dans le code a la place de ,
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a></li>
c'est
<li class="sousmenu"><a href="mise_en_page_4.php">Sous sous menu 4.1.1</a>
<ul class="niveau4">
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.1</a></li>
<li><a href="mise_en_page_4.php">Sous sous menu 4.1.1.2</a></li>
</ul>
</li>
Et voila.
Si tu as des questions !
PS : J'ai volontairement enlevé le div de pub pour plus de claretée
Dernière modification par stouille (08-07-2006 17:22:35)
Hors Ligne
tu peux aussi modifier le css (couleurs, polices, etc ....) grâce a un excellent logiciel gratuit : TOPstyleLite http://www.newsgator.com/download/products/ts3lite.exe
Hors Ligne
Pages :: 1
Discussion | Réponses | Vues | Dernier message |
---|---|---|---|
besoin d'aide sur le menu déroulant par nonogemeaux
|
1 | 3321 | 14-01-2012 23:41:51 par Ririna |
0 | 2412 | 21-01-2011 11:06:18 par rick | |
Problème de plaçage de menu par koni41
|
0 | 4366 | 08-01-2011 05:59:59 par koni41 |
2 | 3049 | 11-06-2010 18:56:24 par metis15 | |
1 | 3947 | 04-05-2010 15:24:59 par klipper |