Bonjour à tous,
Je dois faire face à une problématique au niveau des liens du menu burger.
Aujourd'hui j'ai le menu "vestiaire", avec un lien renvoyant vers la catégorie et le sous-menu apparait au survol pour afficher les sous-catégories dans le menu "normal".
Mais lorsque j'ai le menu burger, le lien de "vestiaire" ne m'affiche pas le sous-menu au clic, je suis dirigé vers la catégorie.
Pour se faire j'ai bricolé une fonction permettant de cliquer sur une icône pour développer les sous-catégories mais cela ne me plaît pas du tout.
Je souhaite que le lien "vestiaire" affiche le sous-menu en cliquant dessus en menu burger et que lorsque j'ai le menu 'normal' le lien "vestiaire" renvoie vers la catégorie.
Merci
et voici mon affichage
Je dois faire face à une problématique au niveau des liens du menu burger.
Aujourd'hui j'ai le menu "vestiaire", avec un lien renvoyant vers la catégorie et le sous-menu apparait au survol pour afficher les sous-catégories dans le menu "normal".
Mais lorsque j'ai le menu burger, le lien de "vestiaire" ne m'affiche pas le sous-menu au clic, je suis dirigé vers la catégorie.
Pour se faire j'ai bricolé une fonction permettant de cliquer sur une icône pour développer les sous-catégories mais cela ne me plaît pas du tout.
Je souhaite que le lien "vestiaire" affiche le sous-menu en cliquant dessus en menu burger et que lorsque j'ai le menu 'normal' le lien "vestiaire" renvoie vers la catégorie.
Merci
JavaScript:
$('ul.nav > li.dropdown > a > .caret').click(function(e) {
// on clique spécifiquement sur une flèche => on ouvre et on ferme, que ce soit tactile ou non
var thisli= $(this).parent().parent();
if(thisli.hasClass('open')) {
thisli.find('ul.dropdown-menu:first').stop(true, true).hide();
thisli.removeClass('open');
} else {
thisli.addClass('open');
thisli.find('ul.dropdown-menu:first').stop(true, true).show();
}
e.preventDefault();
e.stopPropagation();
});
$('ul.nav > li.dropdown a').click(function(e) {
if($(this).attr('href')!='#') {
// Si écran tactile : on ne veut pas que le clic ferme le menu, mais qu'il mène vers le lien
// (Au premier appui, on ouvre le menu avec le hover défini ci-dessus - le second appui fait le clic)
window.location = $(this).attr('href');
} else {
// Ouverture / fermeture du menu
var thisli= $(this).parent();
if(thisli.hasClass('open')) {
thisli.find('ul.dropdown-menu:first').stop(true, true).hide();
thisli.removeClass('open');
} else {
thisli.addClass('open');
thisli.find('ul.dropdown-menu:first').stop(true, true).show();
}
}
e.preventDefault();
e.stopPropagation();
});
et voici mon affichage
HTML:
<div class="navbar-collapse collapse">
<nav>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="http://localhost/monsite/vestiaire" class="dropdown-toggle" data-toggle="dropdown" role="button">Vestiaire</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="http://localhost/monsite/vestiaire1">Vestiaire1</a>
</li>
<li>
<a href="http://localhost/monsite/vestiaire2">Vestiaire2</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
Dernière édition: