Auteur
H.I.M
#
47 Posts
Salut la compagnie,

J'ai suivi le tuto du menu déroulant et j'ai un petit soucis avec le Javascript.
Je veux changer de page tout en gardant un de mes sous menu affiché.
On en parle dans la page "Améliorer l'ergonomie", en utilisant une class dédié "open_at_load".
Mais cela ne fonctionne pas, ai-je omis quelque chose? Smiley ohwell


Voici mes codes

MENU HTML

<!--DIV menu-->
<div id="menu">
	<ul class="navigation">
    	<li class="toggleSubMenu"><span>AGENCE</span>
        	<ul class="subMenu">
            	<li class="soustitre"><a href="#" title="Aller à qui nous sommes">QUI SOMMES NOUS</a></li>
            	<li class="soustitre"><a href="#" title="Aller à que faisons nous">QUE FAISONS NOUS</a></li>
        	</ul>
    	</li>
        <li class="toggleSubMenu"><span>CREATIONS</span>
        	<ul class="subMenu">
            	<li class="soustitre"><a href="#" title="Aller au book mode">MODE</a></li>
            	<li class="open_at_load"><a href="book1.html" title="Aller au book deco">DECO</a></li>
                <li class="soustitre"><a href="#" title="Aller au book marketing direct">MRRKETING DIRECT</a></li>
            	<li class="soustitre"><a href="#" title="Aller au book image de marque">IMAGE DE MARQUE</a></li>
            	<li class="soustitre"><a href="#" title="Aller au book edition">EDITION</a></li>
            	<li class="soustitre"><a href="#" title="Aller voir nos references">REFERENCES</a></li>

        	</ul>
    	</li>
        <li class="toggleSubMenu"><span>CONTACT</span>
        	<ul class="subMenu">
            	<li class="soustitre"><a href="#" title="Aller à la page nous trouver">NOUS TROUVER</a></li>
            	<li class="soustitre"><a href="#" title="Aller à la page nous ecrire">NOUS ECRIRE</a></li>
        	</ul>
    	</li>
	</ul>
</div>


MENU CSS

/* CLASS */
.soustitre {
	text-align:right;
	font-size:15px;
}

.navigation a {
	color:#262727;
	text-decoration:none;
	-webkit-transition: color .6s ease-in;
    -moz-transition: color .46s ease-in;
    -o-transition: color .6s ease-in;
    transition: color .6s ease-in;
}

.navigation a:hover, .navigation a:focus {
	color:#CCC;
	text-decoration:none;
}

.navigation .en-cours a: {
	color:#CCC;
	text-decoration:none;
}

.toggleSubMenu {
	font-family:Arial, Helvetica, sans-serif;
	text-align:right;
	font-weight:bold;
	font-size:40px;	
}

.open_at_load {
	text-align:right;
	font-size:15px;	
}


MENU JAVASCRIPT

$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $(".navigation ul.subMenu:not('.open_at_load')").hide();
    // 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;
    });

} ) ;



Help ME Smiley langue

^
H.I.M
#
47 Posts
J'ai testé quelque chose qui fonctionne a moitié

Dans le Javascript j'ai ajouté :


// On cache les sous-menus

    // sauf celui qui porte la classe "open_at_load" :

    $(".navigation ul.subMenu .soustitre:not('.open_at_load')").hide();



Mais le problème c'est que sur la page ou les sous-menu sont tous fermés, le menu se déplie plus .....
Hors aucun éléments ne porte la class .soustitre ???

EDIT : Dois-je faire un Javascript pour le menu sans les sous-menu dépliés et un pour les sous menu dépliés?
Modifié par H.I.M (03 Jan 2012 - 09:51)

^
H.I.M
#
47 Posts
36 "vue" et pas une réponse !!!
allez on se motive pour 2012 Smiley biggol

^
Patidou
#
2626 Posts
Tu pas posé ta question il y a 2 heures, on répond quand on a du temps libre et quand on connaît la réponse, pas la peine de de s'énerver. Smiley cligne

Avertissement : il est inutile de m'envoyer des mp pour demander de répondre à vos sujets sur le forum. Je répond si j'ai un élément de réponse et si j'ai le temps. Merci d'avance.

^
H.I.M
#
47 Posts
Patidou a écrit :
Tu pas posé ta question il y a 2 heures, on répond quand on a du temps libre et quand on connaît la réponse, pas la peine de de s'énerver. Smiley cligne


Hummm je ne suis pas énervé Smiley lol
Juste un peu bloqué Smiley bawling

^
H.I.M
#
47 Posts
petit UP (pas vilain)

^
SBoudrias
#
891 Posts
Créé un JS Fiddle avec ton cas pour que les intervenants puissent t'aider plus efficacement. Smiley cligne

Ou fournis un exemple en ligne à minima Smiley smile

^
H.I.M
#
47 Posts
Merci, j'ai finalement trouver comment déplier les MENUs lors d'un clic.
J'avais appliqué le hide() sur les enfants hors ça fonctionne mieux en appliquant le hide() sur les subMenu.

De ce fait, j'ai aussi modifié mon Javacript !!! Par contre le menu chargé ne se repli plus du tout quand on clic sur un autre subMenu Smiley ohwell

Voici les codes à jour :

HTML :

<!--DIV menu-->
<div id="menu">
	<ul class="navigation">
    	<li class="toggleSubMenu"><span><a href="#">AGENCE</a></span>
        	<ul class="subMenu">
            	<li class="soustitre"><a href="#" title="Aller à qui nous sommes">QUI SOMMES NOUS</a></li>
            	<li class="soustitre"><a href="#" title="Aller à que faisons nous">QUE FAISONS NOUS</a></li>
        	</ul>
    	</li>
        <li class="toggleSubMenu"><span><a href="#">CREATIONS</a></span>
        	<ul class="open_at_load">
            	<li class="soustitre"><a href="book_mode.html" title="Aller au book mode">MODE</a></li>
            	<li class="soustitre"><a href="book_deco.html" title="Aller au book deco">DECO</a></li>
                <li class="soustitre"><a href="book_marketing.html" title="Aller au book marketing direct">MARKETING DIRECT</a></li>
            	<li class="soustitre"><a href="book_imagemarque.html" title="Aller au book image de marque">IMAGE DE MARQUE</a></li>
            	<li class="soustitre"><a href="book_edition.html" title="Aller au book edition">EDITION</a></li>
            	<li class="soustitre"><a href="#" title="Aller voir nos references">REFERENCES</a></li>

        	</ul>
    	</li>
        <li class="toggleSubMenu"><span><a href="#">CONTACT</a></span>
        	<ul class="subMenu">
            	<li class="soustitre"><a href="#" title="Aller à la page nous trouver">NOUS TROUVER</a></li>
            	<li class="soustitre"><a href="#" title="Aller à la page nous ecrire">NOUS ECRIRE</a></li>
        	</ul>
    	</li>
	</ul>
</div>


Javascript :

$(document).ready( function () {
    // On cache les sous-menus
    // sauf celui qui porte la classe "open_at_load" :
    $("ul.subMenu:not('.open_at_load')").hide();
    // 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;
    });

} ) ;



D'où peut venir se problème? Smiley sweatdrop
Modifié par H.I.M (04 Jan 2012 - 12:04)

^
fvsch
#
20376 Posts
Hello,

La solution donnée dans le tutoriel fonctionne, jusqu'à preuve du contraire (et comme ce sujet est déjà ressorti pas mal de fois, et qu'à chaque fois le souci c'était que la personne n'avait pas suivi consciencieusement le tutoriel, la question ne se pose même pas). Donc si tu veux modifier le script donné dans le tutoriel ou la structure DOM correspondante, et que tu te sens capable de le faire en comprenant exactement ce que tu fais, tant mieux. Mais une solution simple c'est quand même de suivre le tutoriel à la lettre. Smiley cligne

Même remarque que Vaxilart: ça serait plus simple avec un exemple en ligne. C'est un peu prise de tête de se farcir l'analyse de dizaines de lignes de code sans pouvoir tester ce que ça donne dans un navigateur et analyser le code avec un outil de debug (Firebug, Web Inspector ou autre).

^
H.I.M
#
47 Posts
Merci pour l'aide, j'ai finalement réussi,
Comme j'avais ajouté une class sur les <li> je devais aussi déclarer celle-ci dans mon Java & HTML

PS : J'avais bien suivi le tuto sauf que j'ai ajouté d'autres éléments en oubliant de mettre ma class dans le html.

^