11486 sujets

JavaScript, DOM et API Web HTML5

JQuery - Menu déroulant

Salutations,

J'ouvre ce fil car je n'ai pas trouvé ma réponse dans les sujets déjà existants.

J'ai suivi le tutoriel concernant jQuery afin de créer un menu déroulant sur mon site Web.
A priori il fonctionne pas trop mal, mais il y a toutefois une subtilité que j'aimerais résoudre, mais je n'y parviens pas.

Allez sur mon site, www.b3etle.com, cliquer sur le menu déroulant "scripting" . Celui-ci se déroule, maintenant, cliquer sur un de ses sous-menus, la page s'affiche, en revanche le menu déroulant se referme.

Ce que je souhaiterais, c'est que lorsque je navigue dans les sous-menus d'un menu déroulant, celui-ci reste "ouvert", et ne se referme uniquement que si je re-clique dessus, où si je passe sur un autre menu déroulant (ce qui est le cas d'ailleurs).

Voici le code utilisé dans ma sidebar, je le mets ça peut peut-être vous aider. Tout d'abord le script faisant appel à jQuery, ainsi que les paramètres.

<script type="text/javascript" src="http://www.b3etle.com/jquery.js"></script>

<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache tout les sous-menus  
    // on affiche celui qui est derrière un "li.active" :  
    $(".navigation ul.subMenu").hide();  
    $(".navigation li.active > ul.subMenu").show(); 
    // 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="" 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").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", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").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; 
    }); 
} ) ; 
// --> 
 
</script>


Ensuite voici le code faisant appel à mes pages, par exemple celui de la rubrique "tutoriel"

<html>

<body>

<ul class="navigation"> 

<li><a href="http://www.b3etle.com/doku.php?id=documentation:easyphp">EasyPHP</a></li>
    
<li><a href="http://www.b3etle.com/doku.php?id=documentation:htaccess">HTaccess</a></li>

<li><a href="http://www.b3etle.com/doku.php?id=documentation:peripherique_lettre_fixe">Périphérique, lettre fixe</a></li>

<li><a href="http://www.b3etle.com/doku.php?id=documentation:cle_usb_windows_7">Clé USB Windows 7</a></li>
 
    <li class="toggleSubMenu"><span>Scripting</span> 
	
        <ul class="subMenu"> 
		
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:adobe_reader">Adobe Reader</a></li> 
 
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:swap">Fichier Swap</a></li> 
			
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:wmp">Windows Media Player</a></li> 
			
			<li><a href="http://www.b3etle.com/doku.php?id=documentation:7-zip">7-Zip</a></li> 
 
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:filezilla">FileZilla</a></li> 
			
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:flash_player">Flash Player</a></li> 
			
			<li><a href="http://www.b3etle.com/doku.php?id=documentation:nero">Nero 6</a></li> 
 
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:skype">Skype</a></li> 
			
            <li><a href="http://www.b3etle.com/doku.php?id=documentation:supercopier">SuperCopier</a></li> 
			
			<li><a href="http://www.b3etle.com/doku.php?id=documentation:foxit_reader">Foxit Reader</a></li> 
			
			<li><a href="http://www.b3etle.com/doku.php?id=documentation:k-lite">K-Lite</a></li> 
			
			<li><a href="http://www.b3etle.com/doku.php?id=documentation:typsoft">Typsoft</a></li> 
			
			<li><a href="http://www.b3etle.com/doku.php?id=documentation:winrar">Winrar</a></li> 
 
        </ul> 
		
    </li>  
    
	</ul>

</body>

</html>


Merci pour votre aide,
Beetle
Salut,

Dans le sens où tu ne charges pas ton contenu en ajax, ton menu est reconstruit à chaque appel de page. Mais ce que tu peux faire c'est :
- selon le menu actif, passer une variable à php (et c'est peut-être déjà le cas)
- ajouter dynamiquement la classe 'open' au menu actif pour avoir ça :


<li class="toggleSubMenu open">


et ajouter ça dans le css :

.navigation li.open > ul.subMenu{
display:block;
}


Par contre, j'ai pas compris à quoi servait cette action dans le js, car je n'ai vu aucun li avec la classe 'active' :

$(".navigation li.active > ul.subMenu").show();

Modifié par ZeB_panam (19 Apr 2011 - 15:38)
Salut Zeb,

Là tu m'as perdu en route, tu sais moi je n'ai fait que copier le texte, sans réellement connaître beaucoup le JavaScript.

Qu'entends-tu menu actif, il s'agit du code Java que j'ai énoncé en premier, c'est ici que tu veux que j'insère la ligne 
<li class="toggleSubMenu open">
?

a écrit :
et ajouter ça dans le css :

.navigation li.open > ul.subMenu{
display:block;
}

Je n'utilise pas de CSS, je rajoute donc ça je suppose quelque part dans mon 2ème code ?

a écrit :
Par contre, j'ai pas compris à quoi servait cette action dans le js, car je n'ai vu aucun li avec la classe 'active' :

$(".navigation li.active > ul.subMenu").show();

idem, je ne sais même pas ce que fait cette commande, comme je l'ai indiqué, je n'ai fait que suivre bêtement le tutoriel.

Merci à toi,
Beetle
Bonjour,

si je ne dis pas de bêtises, il faudrait tester les liens de ton menu et trouver celui qui est actif, et "montrer" le sous menu qui le contient.

je t'ai mis en dessous une modif pour ton code jQuery, je n'ai pas le temps de le tester la, je te laisse essayer mais je passerai lus tard, n'hesite pas à poster les erreurs.

$(".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>') ; 
        
[#red][b]        if($(this).hasClass("active")) {
            $(this).parent(".navigation li.tooggleSubMenu").find('ul').slideDown("normal", function () { $(this).parent().addClass("open") });  
        }[/b][/#]

    } ) ;

Modifié par silentauben (20 Apr 2011 - 14:32)
Salut,

J'ai essayé de remplacé le script javascript renseigné dans mon premier post par celui du tutoriel dans la rubrique Garder un sous-menu ouvert.

Toujours le même "problème", lorsque je navigue dans un sous-menu, le menu déroulant se referme Smiley decu
Bonjour,

essaye de remplacer mon precedent code par celui la.

$(".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>') ;  
         
        $('a:active').parent(".navigation li.tooggleSubMenu").find('ul').slideDown("normal", function () { $(this).parent().addClass("open") });   
        } 
 
    } ) ;


avec le $('a:active') je recherche le lien actif, ensuite je remonte au li parent avec le .parent(".navigation li.tooggleSubMenu") puis je cherche les ul qui le composent avec le .find('ul') et j'utilise .slideDown("normal", function () { $(this).parent().addClass("open") }) pour le descendre en modifiant sa classe en "open".
Salut silentauben,

J'ai tenté avec ton script, ça ne fonctionne pas, en fait les menus déroulant apparaissent déjà dépliés.

Pour être sûr de ne pas me tromper, voici donc mon script d'origine 

<script type="text/javascript" src="http://www.b3etle.com/jquery.js"></script>

<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache tout les sous-menus  
    // on affiche celui qui est derrière un "li.active" :  
    $(".navigation ul.subMenu").hide();  
    $(".navigation li.active > ul.subMenu").show(); 
    // 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="" 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").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", function () { $(this).parent().removeClass("open") }); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").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; 
    }); 
} ) ; 
// --> 
 
</script>


Que je remplace donc par le tiens


<script type="text/javascript" src="http://www.b3etle.com/jquery.js"></script>

<script type="text/javascript"> 
<!-- 
$(".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>') ;   
          
        $('a:active').parent(".navigation li.tooggleSubMenu").find('ul').slideDown("normal", function () { $(this).parent().addClass("open") });    
        }  
  
    } ) ;
// --> 

</script>


Je ne me trompe pas ?

Merci à toi,
Beetle
non, il faut que tu gardes ton code, tu remplaces juste la partie 

    $(".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>') ;  
    } ) ;


par :

$(".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>') ;   
          
        $('a:active').parent(".navigation li.tooggleSubMenu").find('ul').slideDown("normal", function () { $(this).parent().addClass("open") });    
        }  
  
    } ) ;
Ok donc je me trompais bien.

Cependant je viens de faire les modifs en remplaçant comme tu me l'as indiqué, et les symptômes sont les mêmes.
Le menu déroulant apparaît déjà déroulé.

Regarde le rendu si tu veux, http://www.b3etle.com

La rubrique Scripting est le titre du menu déroulant, et les éléments dessous en sont le contenu
Modifié par b3etle (26 Apr 2011 - 11:11)
Sujet clos
Aller à