Off Canvas Mobile Menu
Mervyn Futter
On my Iphone when the off canvas menu displays I have to click the arrows to open the drop down menu list. It will not open the drop down when I click just the header title. It only opens when I click the arrow. Is there a way to make it open when I click the menu header item too please?
Ofi Khan
Accepted AnswerHello Mervyn Futter
Please use this JavaScript to Template Options -> Custom Code -> Custom JavaScript
jQuery(function($) {
$(document).on("click", ".offcanvas-inner .menu-deeper", function(event) {
$(this)
.closest(".menu-parent")
.toggleClass("menu-parent-open")
.find(">.menu-child")
.slideToggle(400);
});
$(document).on("click", ".offcanvas-inner .menu-child", function(event) {
$(this)
.closest(".menu-parent")
.toggleClass("menu-parent-open")
.find(">.menu-child")
.slideToggle(400);
});
});Best regards
Peter Klinke
Accepted AnswerGreat! That should be standard. 'normal' users do perhaps not understand to click on the arrow ...
Ofi Khan
Accepted AnswerYou are welcome, guys!
I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on Joomla Extension Directory
Christian
Accepted AnswerHello, Perfect this javascript modification, but there is just a problem when you click on the arrow now, the menu opens and closes immediately.
We can see the problem on the Mervyn Futter site : https://theleedsirishcentre.co.uk/
Thanks for your help.
Mervyn Futter
Accepted AnswerOh wow I hadn't noticed that but you're right it does indeed. Is this something that support can help with please?
Ofi Khan
Accepted AnswerThanks for finding the issue. Please ignore the first code. Use this in Template Options -> Cusotm Code -> Custom JavaScript
jQuery(function($) {
$(document).on("click", ".menu-deeper", function(event) {
event.preventDefault();
event.stopPropagation();
if (event.target.classList.contains('menu-toggler')) return;
$(this)
.toggleClass("menu-parent-open")
.find(">.menu-child")
.slideToggle(400);
});
});Christian
Accepted AnswerHello Ofi Khan,
The menu does not close anymore, but now the links in it are not clickable.
Ofi Khan
Accepted AnswerDamn! Thanks for pointing out. Try this please.
jQuery(function($) {
$(document).on("click", ".menu-deeper", function(event) {
if (event.target.classList.contains('menu-toggler')) return;
if (event.target.children.length) {
event.preventDefault();
event.stopPropagation();
$(this)
.toggleClass("menu-parent-open")
.find(">.menu-child")
.slideToggle(400);
}
});
});Ofi Khan
Accepted AnswerYou are welcome. I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on Joomla Extension Directory