J'ai implanté le menu accordéon jQuery avec plus ou moins de succès.
Je tourne sous WordPress.
Par contre, je n'ai pas trouvé comment faire pour que tous les menus parents ait une classe spécifique.
J'ai donc repris la liste des items de la listes et j'ai refait la procédure JS pour chaque.
Ce qui donne ceci :
Et mon code HTML généré par WP est le suivant :
Si quelqu'un a une piste pour alléger mon code JS, ce serait le bienvenu.
(Si c'est une piste pour attribuer une classe à tous les éléments parents sans l'associer aux éléments enfants, ce serait encore plus simple, car du coup, je pourrais alléger mon CSS en même temps)
Je tourne sous WordPress.
Par contre, je n'ai pas trouvé comment faire pour que tous les menus parents ait une classe spécifique.
J'ai donc repris la liste des items de la listes et j'ai refait la procédure JS pour chaque.
Ce qui donne ceci :
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".navigation ul.children").hide();
$(".navigation li.current-cat").parent("ul").show();
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-6 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-7 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-8 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-9 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-10 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-11 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.cat-item-12 > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.children:visible").length != 0) {
$(this).next("ul.children").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.children").slideUp("normal");
$(this).next("ul.children").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
});
// -->
</script> Et mon code HTML généré par WP est le suivant :
<div class="sidebar-left">
<ul class="navigation">
<div class="menugauche">
<li class="cat-item cat-item-6"><a href="http://www.animaleriesherbrooke.com/?cat=6" title="Voir tous les articles classés dans Chiens">Chiens</a>
<ul class='children'>
<li class="cat-item cat-item-13"><a href="http://www.animaleriesherbrooke.com/?cat=13" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-14"><a href="http://www.animaleriesherbrooke.com/?cat=14" title="Voir tous les articles classés dans Nos chiens">Nos chiens</a>
</li>
<li class="cat-item cat-item-15"><a href="http://www.animaleriesherbrooke.com/?cat=15" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-16"><a href="http://www.animaleriesherbrooke.com/?cat=16" title="Voir tous les articles classés dans Mon chien à l'école">Mon chien à l'école</a>
</li>
<li class="cat-item cat-item-17"><a href="http://www.animaleriesherbrooke.com/?cat=17" title="Voir tous les articles classés dans Apprenez-en plus">Apprenez-en plus</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-7"><a href="http://www.animaleriesherbrooke.com/?cat=7" title="Voir tous les articles classés dans Chats">Chats</a>
<ul class='children'>
<li class="cat-item cat-item-18"><a href="http://www.animaleriesherbrooke.com/?cat=18" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-19"><a href="http://www.animaleriesherbrooke.com/?cat=19" title="Voir tous les articles classés dans Nos chats">Nos chats</a>
</li>
<li class="cat-item cat-item-20"><a href="http://www.animaleriesherbrooke.com/?cat=20" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-21"><a href="http://www.animaleriesherbrooke.com/?cat=21" title="Voir tous les articles classés dans Mon chat, son style de vie">Mon chat, son style de vie</a>
</li>
<li class="cat-item cat-item-22"><a href="http://www.animaleriesherbrooke.com/?cat=22" title="Voir tous les articles classés dans Apprenez-en plus">Apprenez-en plus</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-8"><a href="http://www.animaleriesherbrooke.com/?cat=8" title="Voir tous les articles classés dans Petits Mammifères">Petits Mammifères</a>
<ul class='children'>
<li class="cat-item cat-item-23"><a href="http://www.animaleriesherbrooke.com/?cat=23" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-24"><a href="http://www.animaleriesherbrooke.com/?cat=24" title="Voir tous les articles classés dans Nos petits mammifères">Nos petits mammifères</a>
</li>
<li class="cat-item cat-item-25"><a href="http://www.animaleriesherbrooke.com/?cat=25" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-26"><a href="http://www.animaleriesherbrooke.com/?cat=26" title="Voir tous les articles classés dans Apprenez-en plus">Apprenez-en plus</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-9"><a href="http://www.animaleriesherbrooke.com/?cat=9" title="Voir tous les articles classés dans Poissons">Poissons</a>
<ul class='children'>
<li class="cat-item cat-item-27"><a href="http://www.animaleriesherbrooke.com/?cat=27" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-28"><a href="http://www.animaleriesherbrooke.com/?cat=28" title="Voir tous les articles classés dans Nos poissons">Nos poissons</a>
</li>
<li class="cat-item cat-item-29"><a href="http://www.animaleriesherbrooke.com/?cat=29" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-30"><a href="http://www.animaleriesherbrooke.com/?cat=30" title="Voir tous les articles classés dans Apprenez-en plus">Apprenez-en plus</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-10"><a href="http://www.animaleriesherbrooke.com/?cat=10" title="Voir tous les articles classés dans Oiseaux">Oiseaux</a>
<ul class='children'>
<li class="cat-item cat-item-31"><a href="http://www.animaleriesherbrooke.com/?cat=31" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-32"><a href="http://www.animaleriesherbrooke.com/?cat=32" title="Voir tous les articles classés dans Nos oiseaux">Nos oiseaux</a>
</li>
<li class="cat-item cat-item-33"><a href="http://www.animaleriesherbrooke.com/?cat=33" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-34"><a href="http://www.animaleriesherbrooke.com/?cat=34" title="Voir tous les articles classés dans Apprenez-en plus">Apprenez-en plus</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-11"><a href="http://www.animaleriesherbrooke.com/?cat=11" title="Voir tous les articles classés dans Reptiles">Reptiles</a>
<ul class='children'>
<li class="cat-item cat-item-35"><a href="http://www.animaleriesherbrooke.com/?cat=35" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-36"><a href="http://www.animaleriesherbrooke.com/?cat=36" title="Voir tous les articles classés dans Nos reptiles">Nos reptiles</a>
</li>
<li class="cat-item cat-item-37"><a href="http://www.animaleriesherbrooke.com/?cat=37" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-38"><a href="http://www.animaleriesherbrooke.com/?cat=38" title="Voir tous les articles classés dans Apprenez-en plus">Apprenez-en plus</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-12"><a href="http://www.animaleriesherbrooke.com/?cat=12" title="Voir tous les articles classés dans Bassins de jardins">Bassins de jardins</a>
<ul class='children'>
<li class="cat-item cat-item-39"><a href="http://www.animaleriesherbrooke.com/?cat=39" title="Voir tous les articles classés dans Produits vedettes">Produits vedettes</a>
</li>
<li class="cat-item cat-item-40"><a href="http://www.animaleriesherbrooke.com/?cat=40" title="Voir tous les articles classés dans Les Kois">Les Kois</a>
</li>
<li class="cat-item cat-item-41"><a href="http://www.animaleriesherbrooke.com/?cat=41" title="Voir tous les articles classés dans Solutions Pratiques">Solutions Pratiques</a>
</li>
<li class="cat-item cat-item-42"><a href="http://www.animaleriesherbrooke.com/?cat=42" title="Voir tous les articles classés dans Mon nouveau bassin">Mon nouveau bassin</a>
</li>
</ul>
</li>
</div>
</ul>
</div>
Si quelqu'un a une piste pour alléger mon code JS, ce serait le bienvenu.
(Si c'est une piste pour attribuer une classe à tous les éléments parents sans l'associer aux éléments enfants, ce serait encore plus simple, car du coup, je pourrais alléger mon CSS en même temps)