Menu normal et menu déroulant

Version imprimable

Bonjour,
J'ai un menu avec plusieurs élements normal, et avec un seul élement avec des sous éléments.

Je voudrais bien que quand je clique par exemple sur "sousMenu1" et j'affiche la page sousMenu1.php mes sous éléments restent afficher, c'est-à-dire que mon sous menu ne se referme pas, seulement si je clique sur un normal élément de menu par exemple sur "Element1". Comment je pourrais faire? Merci!

Le code javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready( function () {
    $("#menu_left dt.sousMenu").hide();
    $("#menu_left dl.toggleSousMenu span").each( function () {
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;
    $("#menu_left dl.toggleSousMenu > a").click( function () {
        if ($(this).next("dt.sousMenu:visible").length != 0) {
            $(this).next("dt.sousMenu").slideUp("normal");
        }
        else {
            $("#menu_left dt.sousMenu").slideUp("normal");
            $(this).next("dt.sousMenu").slideDown("normal");
        }
        return false;
    });    
} ) ;

Mon menu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<dt>                                                     
    <dl><a href="elemen1.php">Element1</a></dl>
    <dl><a href="element2.php">Element2</a></dl>
        <dl class="toggleSousMenu"><span>Sous Menu</span>
	   <dt class="sousMenu">
		<dl class="active"><a href="sousMenu1.php" title="sousMenu1">sousMenu1</a></dl>
	           <dl><a href="sousMenu2.php" title="sousMenu2">sousMenu2</a></dl>
	            <dl><a href="sousMenu3.php" title="sousMenu3">sousMenu3</a></dl>
	   </dt>
	</dl>
	<dl><a href="element3.php">Element3</a></dl>
	<dl><a href="element4.php">Element4</a></dl>

26/03/2013, 22h47
Lorenzo77

salut,

il faut faire un test pour connaitre qu'elle est la page courante et ouvrir le menu correspondant
26/03/2013, 22h52
harkrisz

Je n'ai pas compris qu'est-ce que je devrais faire... Quel test? Est-ce que tu pourrais m'expliquer? Merci!
26/03/2013, 23h05
Lorenzo77

chaque élement A (<a href=...) du menu correspond a une page !

donc une condition sur le "window.location" et sur les "href" permet de trouver qu'elle est la page courante, aprés il te suffit d'ouvrir le menu sur l’élément correspondant
26/03/2013, 23h28
harkrisz

Merci, mais ça n'a rien changé malheureusement. La page est bien ouverte, mais le menu ne reste pas ouverte toujours pas... C'est le lien le site. Quand je clique sur recette et après tarte, recette se referme, mais je voudrais qu'il reste ouverte.... Et qu'il soit refermé quand je clique par exemple sur acceuil.
26/03/2013, 23h36
Lorenzo77

je vois pas le test sur le nom de la page 8O
ton cas est simple, tu n'as que 3 pages qui ouvre le menu > tarte.php/creme.php/chocolat.php
test si la page courante (affiché dans le navigateur) est une des 3 et si c'est oui, alors ouvre ton menu
26/03/2013, 23h40
harkrisz

Parce que j'ai fait le test en local! :) Merci je vais essayer donc comme ça.

J'ai modifié le code, mais ça ne fonctionne pas, comme je suis débutant j'arrive pas trouver comment faire... Merci pour votre aide!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready( function () {
    $("#menu_left dt.sousMenu").hide();
    $("#menu_left dl.toggleSousMenu span").each( function () {
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;
    $("#menu_left dl.toggleSousMenu > a").click( function () {
        if ($(this).next("dt.sousMenu:visible").length != 0) {
            $(this).next("dt.sousMenu").slideUp("normal");
 
        }
 
 
        else {
			$(this).next("dt.sousMenu").slideDown("normal");
		if(window.location.href='http://localhost/site2/tarte.php' == true){
			 $("#menu_left dt.sousMenu").show();
		}
		if(window.location.href='http://localhost/site2/chocolat.php' == true){
			 $("#menu_left dt.sousMenu").show();
		}
		if(window.location.href='http://localhost/site2/creme.php' == true){
			 $("#menu_left dt.sousMenu").show();
		}
 
 
        }
        return false;
    });    
} ) ;

biggre 8O
tu as ajouté le code dans l'evenement "click" :aie:

le code doit être exécuté a chaque chargement de page, il doit être hors du "click" mais dans le "ready", exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 $(document).ready(function() { $("#menu_left dt.sousMenu").hide(); $("#menu_left dl.toggleSousMenu span").each(function() { var TexteSpan = $(this).text(); $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>'); }); $("#menu_left dl.toggleSousMenu > a").click(function() { if ($(this).next("dt.sousMenu:visible").length != 0) { $(this).next("dt.sousMenu").slideUp("normal"); } return false; }); $(this).next("dt.sousMenu").slideDown("normal"); if (window.location.href = 'http://localhost/site2/tarte.php' == true) { $("#menu_left dt.sousMenu").show(); } if (window.location.href = 'http://localhost/site2/chocolat.php' == true) { $("#menu_left dt.sousMenu").show(); } if (window.location.href = 'http://localhost/site2/creme.php' == true) { $("#menu_left dt.sousMenu").show(); } });
plutot que tester l'url en entier, tu pourrais faire ceci (ca sera moins chiant a chaque changement de serveur !) :

Code:

if( window.location.href.indexOf('tarte.php') !== - 1 ){ // code a exxecuter

je ne pense pas que l'utilisation des TAGs DT/ DL dans un menu soit une bonne chose, tu aurais pu te contenter de UL / Li .

27/03/2013, 12h11
harkrisz

Merci, j'ai essayé ton exemple, et c'est bon, merci!

Sauf que je crois que n'ai pas bien récuperer la page courrant, parce que quand je clique sur recette, il n'affiche pas le menu. En fait recette c'est un span... Comment je pourrais faire? Quand je tape dierctement par exemple tarte.php. La page s'affiche bien, et le menu reste ouvert tant que je suis dans le sous-menu.
27/03/2013, 12h36
Lorenzo77

faut mettre a jour ton site http://recettesgourmands.free.fr/ comme ca je peux facilement voir ce qui merdouille
27/03/2013, 12h45
harkrisz

C'est fait.

C'est bon, j'ai trouvé moi-même! :) J'ai ajouté

Code:

$(this).next("dt.sousMenu").slideDown("normal");

avant le return false. Merci beaucoup pour ton aide!! :)
31/03/2013, 18h40
harkrisz

J'ai rouvert la discussion, parce que le script javascript pour mon sous-menu fonctionne très bien sous tous les navigateurs sauf IE, où mon sous-menu reouvre après tous les cliques sur un élément de menu. Comment je pourrais corriger ça? Voici le lien: http://recettesgourmands.free.fr/ Merci d'avance!
31/03/2013, 19h45
Lorenzo77

je viens de tester avec IE8 et le menu est bien fermé quand on clique sur les autres liens et ouvert quand on est dans recette ... tu as testé qu'elle version de IE ?

c'est peut être pas le JS qui pose probleme mais les CSS, tu vas devoir faire des tests ...
31/03/2013, 19h57
harkrisz

Oui, ça fonctionne. Ce qui ne fonctionne pas, c'est que quand je clique sur un autre élement de menu, par exemple sur connexion, le sous-menu s'ouvre et après tout de suite se referme.
31/03/2013, 22h28
Lorenzo77

arf ... rigolo comme comportement, c'est IE :roll:
ok, je pense que IE est tellement lent que le temps entre le chargement de la page + lancement JS doit être le probleme.
dans ce cas utilise des CSS pour fermer le menu et ouvre le avec le JS quand il le faut.
31/03/2013, 22h57
harkrisz

J'ai essayé avec

Code:

overflow:hidden;

. Cela n'a fonctionne pas vraiment. Qu'est-ce que je pourrais mettre?
01/04/2013, 05h43
Lorenzo77

Code:

display: none;

est plus adapté, "overflow:hidden" sert a cacher ce qui dépasse d'une boite
01/04/2013, 12h03
harkrisz

Merci, je l'ai mis, maintenant un peu mieux.