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?
Voici mes codes
MENU HTML
MENU CSS
MENU JAVASCRIPT
Help ME
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?
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
