Je relance le sujet, car il y a quelque chose qui cloche avec le tutoriel sur le site.
J'ai ajouté une classe tel que suggéré afin de faire en sorte que le menu reste ouvert lorsque on clique sur un lien faisant partie du menu, et celui-ci se referme malgré tout.
Lorsque je fais affiché la source, on voit que la classe est au bon endroit et que seul ce lien dans le menu la possède.
Je demande votre aide afin de m'aider à résoudre le tout.
Voici du code pour vous aider
Le JavaScript tel que décrit dans le tutoriel
Le menu, j'ai fais de quoi de temporaire afin de lui attribuer la classe si c'est lui qui est ouvert, car je voulais vérifier le bon fonctionnement.
Et si j'affiche la source du code, on voit que la page Nos producteurs recoit la classe open_at_load
Avez-vous une petite idée ?
Merci
Sylvain
J'ai ajouté une classe tel que suggéré afin de faire en sorte que le menu reste ouvert lorsque on clique sur un lien faisant partie du menu, et celui-ci se referme malgré tout.
Lorsque je fais affiché la source, on voit que la classe est au bon endroit et que seul ce lien dans le menu la possède.
Je demande votre aide afin de m'aider à résoudre le tout.
Voici du code pour vous aider
Le JavaScript tel que décrit dans le tutoriel
<script type="text/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;
});
} ) ;
</script>
Le menu, j'ai fais de quoi de temporaire afin de lui attribuer la classe si c'est lui qui est ouvert, car je voulais vérifier le bon fonctionnement.
<ul class="navigation">
<li><a href="index.php" title="Qui sommes-nous ?">Qui sommes-nous ?</a></li>
<li class="toggleSubMenu"><span>Notre équipe</span>
<ul class="subMenu">
<?php if ($_GET['id_page'] == 1) { ?>
<li class="open_at_load"><a href="page.php?id_page=1" title="Nos producteurs">Nos producteurs</a></li>
<?php } else { ?>
<li><a href="page.php?id_page=1" title="Nos producteurs">Nos producteurs</a></li>
<?php } ?>
<li><a href="#" title="Nos directeurs">Nos directeurs</a></li>
<li><a href="#" title="Nos recherchistes">Nos recherchistes</a></li>
</ul>
</li>
<li><a href="equipements.php" title="Nos équipements">Nos équipements</a></li>
<li><a href="forfaits.php" title="Forfaits">Forfaits</a></li>
<li><a href="contact.php" title="Nous joindre">Nous joindre</a></li>
<li><a href="#" title="Espace Membres">Espace Membres</a></li>
</ul>
Et si j'affiche la source du code, on voit que la page Nos producteurs recoit la classe open_at_load
<ul class="navigation">
<li><a href="index.php" title="Qui sommes-nous ?">Qui sommes-nous ?</a></li>
<li class="toggleSubMenu"><span>Notre équipe</span>
<ul class="subMenu">
<li class="open_at_load"><a href="page.php?id_page=1" title="Nos producteurs">Nos producteurs</a></li>
<li><a href="#" title="Nos directeurs">Nos directeurs</a></li>
<li><a href="#" title="Nos recherchistes">Nos recherchistes</a></li>
</ul>
</li>
<li><a href="equipements.php" title="Nos équipements">Nos équipements</a></li>
<li><a href="forfaits.php" title="Forfaits">Forfaits</a></li>
<li><a href="contact.php" title="Nous joindre">Nous joindre</a></li>
<li><a href="#" title="Espace Membres">Espace Membres</a></li>
</ul>
Avez-vous une petite idée ?
Merci
Sylvain
