IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Menu déroulant avancé


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut Menu déroulant avancé
    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 : 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
     
    // 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 !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Avril 2011
    Messages
    101
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Avril 2011
    Messages : 101
    Par défaut
    Merci beaucoup, ca fonctionne J'ai modifier un peu le code comme ceci :

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

Discussions similaires

  1. recuperation valeur menu déroulant
    Par jerome1 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 08/06/2005, 11h39
  2. [menu]faire un menu déroulant
    Par Nadine dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 24/03/2005, 08h33
  3. Dimensions d'un Menu déroulant
    Par polo-j dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 11/02/2005, 14h26
  4. Menu déroulant valeur par défaut
    Par Gourouni dans le forum ASP
    Réponses: 11
    Dernier message: 06/12/2004, 16h31
  5. Menu déroulant suite au passage sur un TMenuItem
    Par James_ dans le forum C++Builder
    Réponses: 2
    Dernier message: 05/05/2004, 14h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo