3-nested Sub Menu

Support Themes & Styling
1

Hi again,

Longtime to continue my development web with grav, now i’m handle again, but i have problem in 3 nested menu, you can try at https://web.persahabatan.co.id/id/beranda when i click FASILITAS & PELAYANAN → Layanan Unggulan → Others Menu

but Others menu not show on the right menu, this is my code, im using macros

{% macro nav_loop(page) %}
    {% import _self as macros %}
    {% for p in page.children.visible %}
        {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
        {% if p.children.visible.count > 0 %}
            <li class="dropdown {{ active_page }}">
                <a href="{{ p.url }}" class="dropdown-toggle" data-toggle="dropdown">{{ p.menu }} <span><i class="fa fa-angle-down"></i></span></a>
                <ul class="dropdown-menu multi-level">
                    {{ macros.nav_loop(p) }}
                </ul>
            </li>
        {% else %}
        <li class="{{ active_page }}">
            <a href="{{ p.url }}">{{ p.menu }}</a>
        </li>
    {% endif %}
    {% endfor %}
{% endmacro %}

when i’m inspect element, <li class="dropdown">Others Menu</li> it’s must <li class="dropdown-submenu">Others Menu</li>

can someone give me trick to add submenu in <li> class proprty, im try to dump(macros.nav_loop(p)) but i’m confused, it’s show null

please someone, direction me. thanks.

2

I don’t see any Others menu - only Sebelum 2021

image
image1824×452 112 KB

What are you actually trying to achieve? Why do you need dropdown-submenu specifically? If you want it to expand on the side, you probably could get away with CSS

.dropdown > .multi-level > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    height: fit-content;
}

image
image1250×372 26.9 KB

3

Yes, i want do with if else condition with {{ macros.nav_loop(p) }} object but, if blaa then dropdown-submenu else dropdown… but when i’m dump, it’s null … or, if i compare empty value, it’s all true return…

i will test with your css condition… thanks btw

4

i’m using some code from you

.ownmenu .nav .dropdown-menu .multi-level {
  position: absolute;
  top: 0;
  left: 100%;
  height: fit-content;
  display: none !important;
}

.ownmenu .nav .dropdown-menu:hover .multi-level {
  display: block !important;
}

but other menu has open too, where must i put :hover properties i must?

Thanks for you response

5

But your selector is nothing like in my example. And just a suggestion, never use !important - there’s most likely a proper way to define styles without it.

You also didn’t reply what you’re actually trying to achieve. Do you have an image of the result you’re looking for?

6

No it’s not about selector. it’s just object from p.routable, i follow from other threas

Down arrow in main menu only - #5 by pmoreno

and tweak some my marcos

{% macro nav_loop(page) %}
    {% import _self as macros %}
    {% for p in page.children.visible %}
        {% set active_page = (p.active or p.activeChild) ? 'active' : '' %}
        {% set route_page = (p.routable and p.children.visible.count > 0) ? '-submenu' : '' %}
        {% set icon_submenu = (p.routable and p.children.visible.count > 0) ? '<span><i class="fa fa-angle-down"></i></span>' : '' %}

        <li class="dropdown{{ route_page }} {{ active_page }}">
            {% if p.children.visible.count > 0 %}
                <a href="{{ p.url }}">{{ p.menu }}</a>
                <ul class="dropdown-menu multi-level">
                    {{ macros.nav_loop(p) }}
                </ul>
            {% else %}
                <a href="{{ p.url }}">
                    {{ p.menu }} {{ icon_submenu }}
                </a>
            {% endif %}
        </li>

    {% endfor %}
{% endmacro %}

i’v just little problem now, <span><i class="fa fa-angle-down"></i></span> not work properly in first submenu, but nots problem.

Thanks karmalakas for your suggestions.