Menu déroulant avancé

Version imprimable

Bonjour à toutes et tous,

Je débute avec Jquery mais je me suis tout de même lancé dans la réalisation d'un menu déroulant.
Avec les quelques bribes de script que j'ai pu trouvé sur le web, je suis parvenu à faire quelque chose de pas trop mal, mais cependant pas abouti.

En effet, les liens des éléments du menu principal ne possédant pas de sous-menu ne fonctionnent plus. C'est à cause du onclick qui s'applique à tous les élément de la classe menu-item.

Autre chose, lorsque je clique sur un élément du sous-menu, il me redirige bien vers la page en question, mais le sous-menu se referme, alors que je voudrais qu'il reste ouvert si on est sur l'une des pages du sous-menu en question...

Et est-il possible lors du passage d'un sous menu à un autre, d'attendre que le premier soit fermé avant d'ouvrir le deuxième ? Parce que pour le moment c'est simultané, donc pas très joli...

Voici mon script
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // On cache les sous-menus : $(".menu ul.sub-menu").hide(); //On modifie la class du sous menu pour conserver le mouseover lors du survole de sous-cat $(".menu ul.sub-menu li").addClass("sub-menu-item").removeClass("menu-item"); //On ajouter le curseur correspondant $(".menu li.menu-item > a").css("cursor","pointer"); //on applique l'action mouseover $(".menu li.menu-item > a").click( function () { // Si le sous-menu était déjà ouvert, on le referme : if ($(this).next("ul.sub-menu:visible").length != 0) { $(this).next("ul.sub-menu").slideUp("normal"); } // Si le sous-menu est caché, on ferme les autres et on l'affiche : else { $(".menu ul.sub-menu").slideUp("normal"); $(this).next("ul.sub-menu").slideDown("normal"); } // On empêche le navigateur de suivre le lien : return false; });
Et le lien de mon site

Un grand merci !

Bonsoir

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
$( ".menu ul.sub-menu" ).hide();
 
$( '.menu ul.sub-menu li.current-menu-item' )
	.closest( 'ul' )
	.show();
 
$( ".menu ul.sub-menu li" )
	.addClass( "sub-menu-item" )
	.removeClass( "menu-item" );
 
$( ".menu li.advanced > a" )
	.css( "cursor", "pointer" )
	.click( function(){
		var jObj = $( this );
 
		if ( jObj.next( "ul.sub-menu:visible" ).length != 0 ){
 
			jObj.next( "ul.sub-menu" ).slideUp( "normal" );
 
		} else {
 
			$( ".menu ul.sub-menu" ).slideUp( "normal", function(){
				jObj.next( "ul.sub-menu" ).slideDown( "normal" );
			});
		}
	});

Merci beaucoup, ca fonctionne :) J'ai modifier un peu le code comme ceci :

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
31
32
33
34
35
 
$(document).ready(function() {
 
	//Lanch Homepage Slider
	$('.slider').cycle({ 
		timeout: 7000,
		random: 1,
		speed: 2000
	});
 
	// On cache les sous-menus :
	$(".menu ul.sub-menu").hide();
	$('.menu ul.sub-menu li.current-menu-item').closest('ul').show();
 
 	//On modifie la class du sous menu pour conserver le mouseover lors du survole de sous-cat
 	$(".menu ul.sub-menu li").addClass("sub-menu-item").removeClass("menu-item");
 	//On ajouter le curseur correspondant
 	$(".menu li.advanced > a").css("cursor","pointer");
 
 	//on applique l'action mouseover
 	$(".menu li.advanced > a").click( function () {
 	// Si le sous-menu était déjà ouvert, on le referme :
 	if ($(this).next("ul.sub-menu:visible").length != 0) {
 	$(this).next("ul.sub-menu").slideUp("normal");
 	}
 	// Si le sous-menu est caché, on ferme les autres et on l'affiche :
 	else {
 	$(".menu ul.sub-menu").slideUp("normal");
 	$(this).next("ul.sub-menu").slideDown("normal");
 	}
 	// On empêche le navigateur de suivre le lien :
 	return false;
 	});
 
});

Voir le site

J'ai juste besoin d'une dernière chose, je voudrais que un élément du menu principal disposant d'un sous menu ouvert sois grisé, donc que le css change.

J'ai essayé avec le .css dans la fonction click() mais ca ne donne pas l'effet escompté :/

Un grand merci