Menu normal et menu déroulant

**harkrisz** · 26/03/2013, 20h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Lorenzo77** · 26/03/2013, 22h47

salut,

il faut faire un test pour connaitre qu'elle est la page courante et ouvrir le menu correspondant

**harkrisz** · 26/03/2013, 22h52

Je n'ai pas compris qu'est-ce que je devrais faire... Quel test? Est-ce que tu pourrais m'expliquer? Merci!

**Lorenzo77** · 26/03/2013, 23h05

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

**harkrisz** · 26/03/2013, 23h28

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.

**Lorenzo77** · 26/03/2013, 23h36

je vois pas le test sur le nom de la page

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

**harkrisz** · 26/03/2013, 23h40

Parce que j'ai fait le test en local!

Merci je vais essayer donc comme ça.

**harkrisz** · 27/03/2013, 09h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
    });    
} ) ;

**Lorenzo77** · 27/03/2013, 11h58

biggre

tu as ajouté le code dans l'evenement "click"

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 .

**harkrisz** · 27/03/2013, 12h11

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.

**Lorenzo77** · 27/03/2013, 12h36

faut mettre a jour ton site http://recettesgourmands.free.fr/ comme ca je peux facilement voir ce qui merdouille

**harkrisz** · 27/03/2013, 12h45

C'est fait.

C'est bon, j'ai trouvé moi-même!

J'ai ajouté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

avant le return false. Merci beaucoup pour ton aide!!

**harkrisz** · 31/03/2013, 18h40

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!

**Lorenzo77** · 31/03/2013, 19h45

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 ...

**harkrisz** · 31/03/2013, 19h57

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.

**Lorenzo77** · 31/03/2013, 22h28

arf ... rigolo comme comportement, c'est IE

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.