Staff replied Helix Framework

Offcanvas Menü mit Untermenüpunkten

Asked by Marco 3 years ago Last activity 3 years ago

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

7 replies

Janosch

3 years ago

Hi 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 Asked this

3 years ago

Guten Morgen Janosch,

danke für das JavaScript - funktioniert wunderbar!

Gruß - Marco

Pavel

3 years ago · edited

Hi. 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 Asked this

3 years ago

thank you for your solution Pavel,

in this case the angle brackets are no longer shown for menu items with submenu items.

Pavel

3 years ago

Update the page. I corrected the code

Pavel

3 years ago · edited

And 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

Rashida Rahman Staff

3 years ago

Hello,

Glat to see such helpful community. Thanks to all!