Bonjour à tous,
tout d'abord merci pour le tuto http://www.alsacreations.com/tuto/lire/606-Creer-un-menu-accordeon-avec-jQuery.html qui m'a permis d'avoir une bonne base de départ.
J'ai ensuite trouvé un exemple de ce script décliné pour l'utilisation avec 3 niveaux de profondeur (on les appelera niveau 0, 1, 2).
Et mon soucis vient de la cohabitation entre open_at_load et le 2e niveau de profondeur.
J'aimerai pouvoir laisser ouvert le niveau 1 du menu tout en fermant le niveau 2. Or, lorsque je place mon open_at_load sur la class du submenu (<ul class="subMenu open_at_load">), je me retrouve avec tous les ul enfants ouverts également (donc ceux du niveau 2)
voici mon code javascript qui gere les 3 niveaux :
ainsi que le code HTML du menu lui-meme :
le tout est visible ici
http://www.fermit.com/test_menu2/menu_5.htm
merci de votre aide
tout d'abord merci pour le tuto http://www.alsacreations.com/tuto/lire/606-Creer-un-menu-accordeon-avec-jQuery.html qui m'a permis d'avoir une bonne base de départ.
J'ai ensuite trouvé un exemple de ce script décliné pour l'utilisation avec 3 niveaux de profondeur (on les appelera niveau 0, 1, 2).
Et mon soucis vient de la cohabitation entre open_at_load et le 2e niveau de profondeur.
J'aimerai pouvoir laisser ouvert le niveau 1 du menu tout en fermant le niveau 2. Or, lorsque je place mon open_at_load sur la class du submenu (<ul class="subMenu open_at_load">), je me retrouve avec tous les ul enfants ouverts également (donc ceux du niveau 2)
voici mon code javascript qui gere les 3 niveaux :
<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();
// 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>
ainsi que le code HTML du menu lui-meme :
<ul id="navigation">
<li style="position: static;" class="toggleSubMenu type1"><a href="" title="Afficher le sous-menu">SANITAR-UND HEIZUNGSTECHNIK</a>
<ul class="subMenu open_at_load">
<li style="position: static;" class="toggleSubMenu2"><a href="" title="Afficher le sous-menu">›› Gewindeabdichtungen</a>
<ul class="subMenu2">
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 1</a></li>
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 2</a></li>
</ul>
</li>
<li style="position: static;" class="toggleSubMenu2"><a href="" title="Afficher le sous-menu">›› PVC Rohr-Installation Produkte</a>
<ul class="subMenu2">
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 3</a></li>
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 4</a></li>
</ul>
</li>
</ul>
</li>
<li style="position: static;" class="toggleSubMenu type2"><a href="" title="Afficher le sous-menu">OFEN</a>
<ul class="subMenu">
<li style="position: static;" class="toggleSubMenu2"><a href="" title="Afficher le sous-menu">›› Feuerfest Produkte</a>
<ul class="subMenu2">
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 5</a></li>
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 6</a></li>
</ul>
</li>
<li style="position: static;" class="toggleSubMenu2"><a href="" title="Afficher le sous-menu">›› Dichtstoffe</a>
<ul class="subMenu2">
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 7</a></li>
<li style="position: static;" class="toggleSubMenu3"><a href="" title="">› Prod 8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
le tout est visible ici
http://www.fermit.com/test_menu2/menu_5.htm
merci de votre aide