Si vous utilisez Yootheme et qu'un de vos menus est affiché en « sidebar » (comprenez en colonne, à droite ou gauche du contenu principal), vous constaterez que pour accéder à un lien de second niveau, il faut d'abord cliquer sur le lien parent, ce qui vous fait changer de page, sauf si celui-ci est un séparateur. Nous allons voir ici comment rendre votre menu « accordéon » même quand les liens de premier niveau ne sont pas des séparateurs.
Pour réussir cela, vous devez créer un fichier javascript dans votre template. Nous le nommerons folcomedia-menu-accordeon.js.
Dans cet exemple nous prendrons le thème « yoo_finch » et nous placerons notre menu dans la position « sidebar-a ». Pensez à adapter les chemins des répertoires et les extraits de codes suivant votre besoin.
Commencez donc par créer le fichier templates/yoo_finch/js/folcomedia-menu-accordeon.js sur votre site, à l'aide d'un éditeur FTP par exemple.
Le contenu à placer dans le fichier est le suivant :
jQuery(document).ready(function($) {
$('.tm-sidebar-a li.uk-parent > a').click(function(e) {
var li = $(this).parent();
var submenu = $(this).next();
if (li.attr('aria-expanded') != 'true') {
e.preventDefault();
li.addClass('uk-open').attr('aria-expanded', 'true');
submenu.removeClass('uk-hidden').css('height', 'auto');
var smHeight = submenu.height();
submenu.css('height', 0).animate({
height: smHeight
});
}
});
});
Notez bien la partie en rouge qui est à adapter selon la position dans laquelle vous avez placé votre menu.
Une fois que votre fichier est rempli et enregistré à l'endroit indiqué précédemment, il faut indiquer à votre template de charger ce fichier supplémentaire. Pour cela, rendez-vous dans l'administration de Joomla, puis dans Extensions > Templates, et cliquez sur votre style actif pour la partie publique (il doit y avoir une étoile jaune dans la colonne Défaut et "Site" dans la colonne "Emplacement").
Sur la nouvelle page, vous devriez avoir plusieurs onglets, le second étant "Paramètres", cliquez dessus.
De nouveaux onglets apparaissent alors à gauche, assurez-vous d'être sur le premier, "Settings", puis tout en bas de la page, repérez un champ "Additional Scripts".
Dans celui-ci vous devrez ajouter ceci (là encore adaptez les éléments en couleur si différents de l'exemple) :
<script src="/templates/yoo_finch/js/folcomedia-menu-accordeon.js"></script>
Enfin, enregistrez grâce au bouton vert en haut à gauche de l'écran.
De retour sur votre site, le menu doit maintenant se « dérouler » au clic sur un élément de premier niveau, comme s'il s'agissait d'un séparateur. Un second clic (une fois que le menu est déjà ouvert) vous permettra de suivre le lien normalement. Si vous souhaitez que le sous-menu se referme lors d'un second clic, vous pouvez modifier le fichier javascript créé en y mettant le code ci-dessous, un peu plus complet que le premier. Attention cependant, votre page intermédiaire ne sera alors pas directement accessible sauf si le lien est présent ailleurs (menu principal ou fil d'Ariane par exemple).
jQuery(document).ready(function($) { $('.tm-sidebar-a li.uk-parent > a').click(function(e) { var li = $(this).parent(); var submenu = $(this).next(); if (li.attr('aria-expanded') != 'true') { e.preventDefault(); li.addClass('uk-open').attr('aria-expanded', 'true'); submenu.removeClass('uk-hidden').css('height', 'auto'); var smHeight = submenu.height(); submenu.css('height', 0).animate({ height: smHeight }); } else { e.preventDefault(); li.removeClass('uk-open').attr('aria-expanded', 'false'); submenu.animate({ height: 0 }, 400, function() { submenu.addClass('uk-hidden') }); } }); });
Nous espérons que cette astuce vous sera aussi utile qu'à nous !