18041 sujets

Questions générales et questions de débutants

Menu verticaux multi niveaux

Bonjour,

Je souhaite réaliser un menu verticale multi-niveau type accordéon en m'inspirant du tuto trouvé sur alsacreation.

J'ai mis en place le multi-niveau cependant lorsque celui-ci s'affiche et que je tente d'aller sur les liens qu'ils contient celui-ci se referme :

Je m'explique

Menu
Sous menu
Sous sous menu

Donc quand je passe sur "Sou menu", le "Sous sous menu" s'affiche bien mais quand je passe dessus (sur le "Sous sous menu") il se referme. (tout les menus et sous menu sont composés de liens).


Mon problème est donc de laisser ouvert mon "Sous sous menu" quand je passe dessus, et de ne le refermer uniquement lorsque je passe sur un "Sous menu".

Code Html dela page :

<ul class="navigation">
	<li class="toggleSubMenu">
		<span>menu 1</span>
		<ul class="subMenu">
			<li><a href="" >Sous menu 1</a></li>
			<li><a href="" >Sous menu 2</a></li>
			<li><a href="" >Sous menu 3</a></li>
			<li><a href="" >Sous menu 3</a></li>
		</ul>
	</li>
	
	<li class="toggleSubMenu">
		<span>menu 2</span>
		<ul class="subMenu">
			<li><a href="" >Sous menu 1</a></li>
			<li>
				<a href="" >Sous menu 2</a>
					<ul class="ssubMenu">
						<li><a href="" >Sous menu 1</a></li>
						<li><a href="" >Sous menu 2</a></li>
						<li><a href="" >Sous menu 3</a></li>
						<li><a href="" >Sous menu 3</a></li>
					</ul>
			</li>
			<li><a href="" >Sous menu 3</a></li>
			<li><a href="" >Sous menu 3</a></li>
		</ul>
	</li>
	
	<li class="toggleSubMenu"><span>menu 3</span></li>
	<li class="toggleSubMenu"><span>menu 4</span></li>
</ul>




Code Javascript : 

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<!--
$(document).ready( function () {
  // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
	$("ul.navigation ul.subMenu li ul.ssubMenu:not('.ouvert_at_load')").hide();

    $(".navigation ul.subMenu:not('.ouvert_at_load')").hide();

    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"

  // ici j'essay de controler les "Sous sous menu"
    $("ul.navigation li.toggleSubMenu ul.subMenu li ul.ssubMenu li > a").mouseover( function () {
	
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.ssubMenu:visible").length != 0) {
            $(this).next("ul.ssubMenu").slideUp("normal", function () { $(this).parent().removeClass("ouvert") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.ssubMenu").slideUp("normal", function () { $(this).parent().removeClass("ouvert") });
            $(this).next("ul.ssubMenu").slideDown("normal", function () { $(this).parent().addClass("ouvert") });
        }
        // On empêche le navigateur de suivre le lien :
        //return false;
    });
   
   
   
   
    // 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="" title="Afficher le sous-menu">'+ 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").hover( 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", function () { $(this).parent().removeClass("ouvert") });
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("ouvert") });
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("ouvert") });
        }
        // On empêche le navigateur de suivre le lien :
       
    });
	 return false;
	
} ) ;
// -->



Si on pouvait me débloquer, merci.
Modifié par tutcrubo (04 May 2009 - 12:24)
Salut tutcrubo,

Je ne trouve pas le tuto alsa dont tu parles (une url ?), mais ton code JS me semble pas mal chargé pour une comportement somme toute assez simple. Voici une solution bien plus courte (à placer bien sûr dans ton document.ready()) :
$('.navigation li')

    .find('ul')
        .hide().end()

    .find('span, a')
        .mouseover(function() { 
            $(this)
                .siblings('ul').slideDown().end()
                .parent().siblings('li').find('ul:visible').slideUp();
        });
Ce n'est qu'une base, bien sûr, mais tu dois pouvoir ajouter tes propres instructions sans souci, je pense.
Sujet clos
Aller à