Salut à tous,
Meilleurs voeux pour cette nouvelle année et surtout bonne santé.
J'ai le menu ci-dessous :
Et j'ai ce code javascript pour jquery qui permet d'ouvrir et de fermer les sous-menus :
Avec les écrans non tactiles, les sous-menus s'affichent avec la souris onMouseOver sur les liens "Lien" et "Liens 2".
Avec les écrans tactiles, il faut toucher les chevrons <i class="fa fa-chevron-down"> pour que les sous-menus s'affichent en dessous.
Tout cela fonctionne très bien mais je voudrais maintenant qu'avec les écrans tactiles l'on puissent ouvrir et fermer les sous-menus en touchant les liens <a> "Lien" et "Lien 2". Pour l'instant, ça n'ouvre pas les sous-menus mais ça affiche la page qui est dans la balise <a> (soit https://www.mon-site.com/lien.html ou https://www.mon-site.com/lien-2.html).
Comment faire avec les écrans tactiles pour que les sous-menus s'affichent en-dessous lorsqu'on clique sur les liens <a> "Lien" et "Lien 2" (sans changer de page) ?
Dans mon code javascript, j'ai ciblé cette ouverture des sous-menus via la class "menu_link" qui est dans la balise <a href="https://www.mon-site.com/lien.html" class="menu_link" title="Lien">Lien</a> mais ça ne fonctionne pas.
Merci pour votre aide.
Meilleurs voeux pour cette nouvelle année et surtout bonne santé.
J'ai le menu ci-dessous :
Code:
<nav>
<ul>
<li class="full-width">
<a href="https://www.mon-site.com/lien.html" class="menu_link" title="Lien">Lien</a><i class="fa fa-chevron-down"></i>
<div class="submenu">
<div class="full-width-menu-items-right"></div>
<div class="full-width-menu-items-left">
<div class="row">
<div class="col-lg-12">
<ul class="list-type-1 toggle-list-container2">
<li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page.html" title="Sous menu">Sous menu</a></li>
<li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-2.html" title="Sous menu 2">Sous menu 2</a></li>
<li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-3.html" title="Sous menu 3">Sous menu 3</a></li>
</ul>
</div>
</div>
</div>
</div>>
</div>
</li>
<li class="full-width">
<a href="https://www.mon-site.com/lien-2.html" class="menu_link" title="Lien 2">Lien 2</a><i class="fa fa-chevron-down"></i>
<div class="submenu">
<div class="full-width-menu-items-right"></div>
<div class="full-width-menu-items-left">
<div class="row">
<div class="col-lg-12">
<ul class="list-type-1 toggle-list-container2">
<li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-4.html" title="Sous menu 4">Sous menu 4</a></li>
<li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-5.html" title="Sous menu 5">Sous menu 5</a></li>
<li><i class="fa fa-angle-right"></i><a href="https://www.mon-site.com/page-6.html" title="Sous menu 6">Sous menu 6</a></li>
</ul>
</div>
</div>
</div>
</div>>
</div>
</li>
</ul>
</nav>
Code:
$('nav ul li a.menu_link, nav li .fa').on('click', function(e) {
if(_isresponsive){
e.preventDefault();
$(this).parent().find('.submenu').slideToggle();
$(this).parent().toggleClass('opened');
}
});Avec les écrans tactiles, il faut toucher les chevrons <i class="fa fa-chevron-down"> pour que les sous-menus s'affichent en dessous.
Tout cela fonctionne très bien mais je voudrais maintenant qu'avec les écrans tactiles l'on puissent ouvrir et fermer les sous-menus en touchant les liens <a> "Lien" et "Lien 2". Pour l'instant, ça n'ouvre pas les sous-menus mais ça affiche la page qui est dans la balise <a> (soit https://www.mon-site.com/lien.html ou https://www.mon-site.com/lien-2.html).
Comment faire avec les écrans tactiles pour que les sous-menus s'affichent en-dessous lorsqu'on clique sur les liens <a> "Lien" et "Lien 2" (sans changer de page) ?
Dans mon code javascript, j'ai ciblé cette ouverture des sous-menus via la class "menu_link" qui est dans la balise <a href="https://www.mon-site.com/lien.html" class="menu_link" title="Lien">Lien</a> mais ça ne fonctionne pas.
Merci pour votre aide.
