Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Sub menu in mega menu

Started by Mat 7 years ago · 1 replies · 1308 views

7 years ago

Hi,

I'm working on a personalised version of quark theme,
in navbar I have various menu and sub-menu, here no problem,
but I'm working on a megamenu, where inside there are the products pages, divided by categories. Product is a folder, where inside I have categories and sub-categories.
To not see in standard navbar the link to "products folder" I put hte folder as routable but not visible.

try to be more clear:
in navbar I have the button [PRODUCTS]
the dropdown open the full width menu
inside full width menu I I entered the call to: {% include 'partials/mega-menu-navigation.html.twig' %}
the menu is dived in 3 sections (3 columns 60% 20% 20%):
section 1 is for pages in "category one"
section 2 is for pages in "category two"
section 2 is for pages in "category three"
every section have some sub-categories (linked to category page), and direct link to product page.

structure of pages:

inside folder "products"

category one

subcategory one-one

product page "product name 1"

subcategory one-two

product page "product name 2"
product page "product name 3"

category two

subcategory two-one

product page "product name 4"

subcategory two-two

product page "product name 5"
product page "product name 6"

category three

subcategory two-one

product page "product name 7"
product page "product name 8"

TWIG
partials/mega-menu-navigation.html.twig

to show the list of pages I tried to use this code:

<ul>
{% for p in page.find('/products/category_one').children if p != page %}
<li><a href="{{p.url}}">{{ p.title }}</a></li>
{% endfor %}
</ul>

but I see only the list of subcategories, and not his children...

I've tried to intend and use the "macro loop" inside "navigation.html.twig", but without success...

someone can help me?

Many thanks

7 years ago

Seems I solved, this is my mega-menu-navigation.html.twig:

<div class="container pt-2">
<div class="columns">
<div class="column col-7">
<h5 class="text-primary p-2 text-lowercase">{{ page.find('/products/category_one').header.title }}</h5>
<div class="divider"></div>

TWIG

    <ul class="menu">
        {% for page in pages.find('/products/category_one').children.visible %}
            {% if page.children.visible is empty %}
            <li class="menu-item">
                <a href="{{ page.url }}">{{ page.title }}</a>
                {% else %}
                    <li class="menu-item">
                        <a href="{{ page.url }}">{{ page.title }}</a>
                        <ul class="menu">
                        {% for child in page.children.visible %}
                            {% if child.children.visible is empty %}
                                <li class="menu-item">
                                    <a href="{{ child.url }}">{{ child.title }}</a>
                            {% else %}
                                <li class="menu-item">
                                    <a href="{{ page.url }}">{{ child.title }}</a>
                                    <ul class="menu">
                                    {% for subchild in child.children.visible %}
                                        <li><a href="{{ subchild.url }}">{{ subchild.title }}</a></li>
                                    {% endfor %}
                                    </ul>
                                </li>
                            {% endif %}
                            </li>
                        {% endfor %}
                </ul>
            {% endif %}
            </li>
        {% endfor %}
    </ul>

  </div>
  <div class="column col-3">
      <h5 class="text-primary p-2 text-lowercase">{{ page.find('/products/category_two').header.title }}</h5>
      <div class="divider"></div>

      <ul class="menu">
        {% for page in pages.find('/products/category_two').children.visible %}
            {% if page.children.visible is empty %}
            <li class="menu-item">
                <a href="{{ page.url }}">{{ page.title }}</a>
                {% else %}
                    <li class="menu-item">
                        <a href="{{ page.url }}">{{ page.title }}</a>
                        <ul class="menu">
                        {% for child in page.children.visible %}
                            {% if child.children.visible is empty %}
                                <li class="menu-item">
                                    <a href="{{ child.url }}">{{ child.title }}</a>
                            {% else %}
                                <li class="menu-item">
                                    <a href="{{ page.url }}">{{ child.title }}</a>
                                    <ul class="menu">
                                    {% for subchild in child.children.visible %}
                                        <li><a href="{{ subchild.url }}">{{ subchild.title }}</a></li>
                                    {% endfor %}
                                    </ul>
                                </li>
                            {% endif %}
                            </li>
                        {% endfor %}
                </ul>
            {% endif %}
            </li>
        {% endfor %}
    </ul>

  </div>
  <div class="column col-2">
    <h5 class="p-2"><span class="label label-error"></span></h5>
    <div class="divider"></div>

  </div>

</div>

</div>

😃

Topic	Replies	Views	Activity
Well done Grav Team General · by Jerry Hunt, 4 days ago	2	80	9 hours ago
Grav 2, Admin Next, API and Migrate are now in production! General · by pamtbaau, 14 hours ago	1	51	13 hours ago
Welcome to the new Grav Forums! General · by Andy Miller, 1 day ago	0	44	1 day ago
How active is Grav? General · by Marcel, 12 months ago	6	346	5 days ago
Contents in bin folder delete itself during core updates General · by Duc , 5 days ago	3	40	5 days ago

Suggested topics