11549 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Sous-menu à trois niveaux en jquery

Bonjour à tous !

Alors voila je suis en train de faire un site web afin de présenter un atelier de déco et je bloque à un endroit.

Je voulais faire un menu accordeon en jquery et j'ai donc utilisé -l'excellent- tutoriel d'alsacreations : http://www.alsacreations.com/tuto/lire/604-Creer-un-menu-accordeon-avec-jQuery.html

Seulement voila, j'ai besoin d'un menu à trois niveaux de type :

Produits
> Gamme de produits 1
>> Produit 1
>> Produit 2
etc...

J'aimerais donc que vous m'éclairiez, j'ai fait des tests mais je n'arrive à rien du tout...

Il s'agit d'un site inspiré de celui-ci : http://branca-lisboa.com avec un menu fixe à droite. J'aimerais donc, d'autre part, que lorsque je clique sur le nom d'un produit, cela m'affiche un diaporama d'images du produit en question sur la gauche (comme sur le site ci-dessus, en somme).

J'espère avoir été assez clair. Merci de votre aide ! voici mes codes :

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--[if lte IE 7]> <html class="ie7 oldie" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="fr"> <!--<![endif]-->

<head>

	<title>Atelier</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=ISO-8859-1" />
	<link rel="icon" href="" />
	<link rel="stylesheet" href="./atelier/style.css" type="text/css" />
	
	
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready( function () {
		// On cache les sous-menus :
		$(".navigation ul.subMenu").hide();
		// On sélectionne tous les items de liste portant la classe "toggleSubMenu"

		// et on remplace l'élément span qu'ils contiennent par un lien :
		$(".navigation li.toggleSubMenu span").each( function () {
			// On stocke le contenu du span :
			var TexteSpan = $(this).text();
			$(this).replaceWith('<a href="">' + TexteSpan + '<\/a>') ;
		} ) ;

		// On modifie l'évènement "click" sur les liens dans les items de liste
		// qui portent la classe "toggleSubMenu" :
		$(".navigation li.toggleSubMenu > a").click( function () {
			// Si le sous-menu était déjà ouvert, on le referme :
			if ($(this).next("ul.subMenu:visible").length != 0) {
				$(this).next("ul.subMenu").slideUp("normal");
			}
			// Si le sous-menu est caché, on ferme les autres et on l'affiche :
			else {
				$(".navigation ul.subMenu").slideUp("normal");
				$(this).next("ul.subMenu").slideDown("normal");
			}
			// On empêche le navigateur de suivre le lien :
			return false;
		});    


	} ) ;
	</script>    
	
	<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="./bgstretcher.js"></script>
	<link rel="stylesheet" href="./bgstretcher.css" />
	
	<script type="text/javascript">
	$(document).ready(function(){
	//  Initialize Backgound Stretcher
	$(document).bgStretcher({
	images: ['images/sample-2.jpg', 'images/sample-3.jpg'],
	imageWidth: 3000, imageHeight: 1500, nextSlideDelay : 7000
	});
	});
	</script>
	
	
</head>

<body>

<!-- Wrap -->
<div id="wrap">

	<!-- Header -->
    <div id="fixed"><a href="#"><img src="./atelier/logo.png" width="204" height="42" alt="Atelier" /></a> 
    <!-- Fin header -->
	
	
	<!-- Menu -->
	
		
	<ul class="navigation">
		<li class="toggleSubMenu" id="toggleSubMenu_entreprise"><hr /><span>ENTREPRISE</span>
			<ul class="subMenu" id="subMenu_entreprise">
				<li><p>blablabla</p>
				</li>
			</ul>
		</li>
		
		<li class="toggleSubMenu"><span>PRODUITS</span>
			<ul class="subMenu">
			  <li><a href="#">Gamme de produit 1</a></li>
			  <li><a href="#">Gamme de Produit 2</a></li>
			  <li><a href="#">Gamme de Produit 3</a></li>
			  <li><a href="#">Gamme de Produit 4</a></li>
			</ul>
		</li>
		
		<li class="toggleSubMenu"><span href="">DECORATION</span>
		</li>
		
		<li class="toggleSubMenu"><span>CONTACT</span>
			<ul class="subMenu" id="subMenu_contact">
				<li><p>blabla</p>
				</li>
			</ul>
		<hr /></li>	
	</ul>			
	<!-- Fin menu -->
	
	
	<div id="footer"><p>blabla</p></div>
	
	</div>
	
	
	
<!-- Fin wrap -->	
</div>
	
</body>

</html>


CSS :

* {
	margin:50;
	padding:0;
	outline:none;
}
html { overflow:hidden; }
body { height:100%; width:100%; min-width:960px; font:10px, Arial, sans-serif; background-color:white; overflow:hidden; }

#wrap { position:absolute; margin:0 auto; height:100%; width:100%; min-width:960px; max-width:1400px; z-index:8; }
#fixed { position:absolute; top:50px; right:90px; width:204px; overflow:visible!important; }

a { text-decoration:none; outline:none; }
img { border:none; }
li { list-style:none; }

hr { position:relative; border:0; border-top:1px solid #000; height:0; margin:15px 0 15px 0px; width:204px; z-index:8; }

#wrap { position:absolute; margin:0 auto; height:100%; width:100%; min-width:960px; max-width:1400px; z-index:8; }

p { font-family : Helvetica, Tahoma, Arial; font-size:11px;}
p .invisible { display: none; }

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 204px;
  float:left;
  z-index:3 !important; 
  overflow:visible!important; 
}

.navigation a, .navigation span {
  display: block;
  padding: 4px 10px;
  text-decoration: none;
}

.navigation a:hover { 
	text-decoration : none;
}

.toggleSubMenu {
	margin-bottom : 9px;
}

.toggleSubMenu a {
	font-family : Tahoma ;
	font-size:10px;
	color:black;
	letter-spacing:3px;
}

.toggleSubMenu a:active { color:black;}

.toggleSubMenu p { text-align:justify; }

.navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
  background-image: url(menu-item-deroule.png);
}
.navigation .open a, .navigation .open span {
  background-image: url(menu-item-enroule.png);
}
.navigation a:hover, .navigation a:focus, .navigation a:active {
  text-decoration: underline;
}
.navigation .subMenu {
  font-size: .8em;
  font-size: .7em;
  margin: 0;
  padding: 0;
  background-color:#ebebeb;
}
.navigation ul.subMenu a {
  background: none;
  padding: 3px 20px;
}

#subMenu_entreprise {
	width:500px;
	float:right;
	padding : 0 5px 5px 5px;
}

.ie7 #subMenu_entreprise, #subMenu_contact {
	padding : 7px 5px 7px 5px;
	width:204px;
}

#footer p {
	font-family : Tahoma;
	font-size:9px;
	text-transform: uppercase;
	letter-spacing:1px;
	padding-left:2px;
	text-align:center;
}

Modifié par hender (15 Sep 2012 - 20:54)
Pour ceux que ça intéresse j'ai trouvé la solution pour le menu en accordéon à 3 niveaux Smiley biggrin

En gros ça donne :

Menu 1
> Menu 1.1
>> Menu 1.1.1

Je me suis inspiré de http://brocollection.free.fr/ , j'ai corrigé une petite erreur dans le script (le Menu 1.1.1 n'était pas masqué lors du déroulement du Menu 1) avec la fonction .hide()

Au niveau du script ça donne ça :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
		<!--
		$(document).ready( function () {
			// On cache les sous-menus
			// sauf celui qui porte la classe "open_at_load" :
			$("ul.subMenu:not('.open_at_load')").hide();
			$("ul.subMenu2:not('.open_at_load')").hide();
			// On selectionne tous les items de liste portant la classe "toggleSubMenu"
		
			// et on remplace l'element span qu'ils contiennent par un lien :
			$("li.toggleSubMenu span").each( function () {
				// On stocke le contenu du span :
				var TexteSpan = $(this).text();
				$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;
			} ) ;
		
			// On modifie l'evenement "click" sur les liens dans les items de liste
			// qui portent la classe "toggleSubMenu" :
			$("li.toggleSubMenu > a").click( function () {
				// Si le sous-menu etait deja ouvert, on le referme :
				if ($(this).next("ul.subMenu:visible").length != 0) {
					$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
				}
				// Si le sous-menu est cache, on ferme les autres et on l'affiche :
				else {
					$("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
					$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
					$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
				}
				// On empêche le navigateur de suivre le lien :
				return false;
			});
			 $("li.toggleSubMenu2 > a").click( function () {
				// Si le sous-menu etait deja ouvert, on le referme :
				if ($(this).next("ul.subMenu2:visible").length != 0) {
					$(this).next("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
				}
				// Si le sous-menu est cache, on ferme les autres et on l'affiche :
				else {
					$("ul.subMenu2").slideUp("normal", function () { $(this).parent().removeClass("open") } );
					$(this).next("ul.subMenu2").slideDown("normal", function () { $(this).parent().addClass("open") } );
				}
				// On empêche le navigateur de suivre le lien :
				return false;
			});
		 } ) ;
		// -->
		</script>  
	
	<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="./bgstretcher.js"></script>
	<link rel="stylesheet" href="./bgstretcher.css" />


Côté html :

<ul class="navigation">
		
		<li class="toggleSubMenu"><span>Menu 1</span>
			<ul style="display:block;" class="subMenu">
			  <li style="position: static; " class="toggleSubMenu2 open"><a href="#">Menu 1.1</a>
				<ul style="display: block; " class="subMenu2">
					<li title=""><a href="">Menu 1.1.1</a></li></ul>
			  </li>
			  <li><a href="#">Menu 2</a></li>
			</ul>
		</li>	
		
</ul>

Modifié par hender (15 Sep 2012 - 20:54)
Sujet clos
Aller à