Menu déroulant : 4 niveau profondeur

ilofr · 01-07-2006 19:26:34

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

merci merci big_smile

à bientôt,
ilofr
(désolée si je me répète dans le thème detout de rien)

stouille · 08-07-2006 17:18:59

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)

stouille · 09-07-2006 10:17:27

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

Discussion	Réponses	Vues	Dernier message
besoin d'aide sur le menu déroulant par nonogemeaux	1	3322	14-01-2012 23:41:51 par Ririna
Niveau de securité d'un filtrage par adresse MAC par rick	0	2413	21-01-2011 11:06:18 par rick
Problème de plaçage de menu par koni41	0	4368	08-01-2011 05:59:59 par koni41
Problème avec IE6 et le superbe menu vertical à niveaux par metis15	2	3051	11-06-2010 18:56:24 par metis15
Menu déroulant CSS ne fonctionne pas avec internet explorer par Alandra	1	3947	04-05-2010 15:24:59 par klipper

Forum d'entraide: tuto-fr.com

Annonce

#1 01-07-2006 19:26:34