Offcanvas Menü Mit Untermenüpunkten
Marco
Hello,
I have a question regarding the Offcanvas menu. Is it possible that in menu items with submenu items, the submenu items are fully displayed when the menu title is clicked - currently this is possible via the arrow. I am aware that this approach opens the respective page for menu items without submenu items, which may also be intentional for a menu item with submenu items.
Apparently the arrow selection doesn't work so well on iPhones and Safari, at least I've heard from some users that they have to click the arrow more often to see the submenu items.
Is it possibly related to the Safari version?
Greeting - Marco
Janosch
Accepted AnswerHi Marco,
wenn du unter Template Options -> Custom Code -> Custom Javascript folgenden Code einfügst, dann öffnet ein Klick auf einen Menü-Oberpunkt im Offcanvas Menü dessen Unterpunkte:
/* zeigt Unterpunkte im OCM auch bei Klick auf den Oberpunkt und nicht nur auf den Pfeil */
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);
}
});
});Marco
Accepted AnswerGuten Morgen Janosch,
danke für das JavaScript - funktioniert wunderbar!
Gruß - Marco
Pavel
Accepted AnswerHi. The simpler the solution, the better the performance. CSS would be enough.
.offcanvas-menu .menu-toggler {
inset: 0;
display: flex !important;
justify-content: end;
align-items: center;
}Marco
Accepted Answerthank you for your solution Pavel,
in this case the angle brackets are no longer shown for menu items with submenu items.
Pavel
Accepted AnswerAnd I want to add. In my practice, if necessary, that the menu link also works, I just increase the clickable area of the arrow
.offcanvas-menu .menu-toggler {
display: flex !important;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
padding-left: 10px;
border-left: 1px solid #c4c0c0;
}Looks so
