Menu déroulant : 4 niveau profondeur (Page 1) / Demande de tutos / Forum d'entraide: tuto-fr.com

Annonce

Visitez la boutique Wifi-highpower.com, votre revendeur agréé Alfa Network: du matériel Wifi sélectionné, cartes Wifi USB Awus036h et Awus036nh, antennes omnis, yagis, panel, amplis wifi, accessoires...

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

ilofr
Membre
Inscription : 01-07-2006
Messages : 1

Menu déroulant : 4 niveau profondeur

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)

Hors Ligne

Annonce

Visitez la boutique Wifi-highpower.com, votre revendeur agréé Alfa Network: du matériel Wifi sélectionné, cartes Wifi USB Awus036h et Awus036nh, antennes omnis, yagis, panel, amplis wifi, accessoires...

#2 08-07-2006 17:18:59

stouille
Membre
Lieu : Paris
Inscription : 06-07-2006
Messages : 78

Re : Menu déroulant : 4 niveau profondeur

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

#3 09-07-2006 10:17:27

stouille
Membre
Lieu : Paris
Inscription : 06-07-2006
Messages : 78

Re : Menu déroulant : 4 niveau profondeur

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

Annonce

Visitez la boutique Wifi-highpower.com, votre revendeur agréé Alfa Network: du matériel Wifi sélectionné, cartes Wifi USB Awus036h et Awus036nh, antennes omnis, yagis, panel, amplis wifi, accessoires...

Sujets similaires