General

Down arrow in main menu only

Started by Pedro M 4 years ago · 5 replies · 585 views

4 years ago

Hello there

I'm trying to make a navigation menu with jquery dropotron library, and I'd like show the down arrow only in top level items. This is my code in macros.html.twig:

TWIG

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    {% set dropdown_angle_down = "submenu fa-angle-down" %}
    <li>
      <a {% if p.routable != false %}href="{{ p.url }}"{% else %}{% endif %}{% if p.children.visible.count > 0 %} class="{{ dropdown_angle_down }}"{% else %}{% endif %}>
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

With this code, the down arrow is applied to all pages with children, but I don't know all options of page collections to limit, in this case, a style class to top level pages.

Can anyone help me to get this?

Thanks.

4 years ago

Maybe you could add some default level value to a macro, eg. {% macro nav_loop(page, level = 1) %} and then use it in your condition - level == 1 🤔 And call deeper level with {{ macros.nav_loop(p, level++) }}

Disclaimer: didn't check the syntax, so might be a bit wrong, but you should get the idea

4 years ago

Hi @Karmalakas

I've tested your suggestion but I'm not able to get the desired result.

I'd like to get this:

HTML

<nav id="nav">
  <ul>              
    <li><a href="index.html">Home</a></li>                  
      <li>                      
        <a href="#" class="submenu fa-angle-down">Page Layouts</a>
           <ul>
              <li><a href="left-sidebar.html">Left Sidebar</a></li>
              <li><a href="right-sidebar.html">Right Sidebar</a></li>
              <li><a href="no-sidebar.html">No Sidebar</a></li>
                 <li>
                    <a href="#">Submenu</a>
                       <ul>
                          <li><a href="#">Option One</a></li>
                          <li><a href="#">Option Two</a></li>
                          <li><a href="#">Option Three</a></li>
                       </ul>
                 </li>
           </ul>
      </li>
  </ul>
</nav>

However, my result is:

HTML

<nav id="nav">
  <ul>              
    <li><a href="index.html">Home</a></li>                  
      <li>                      
        <a class="submenu fa-angle-down">Page Layouts</a>
           <ul>
              <li><a href="left-sidebar.html">Left Sidebar</a></li>
              <li><a href="right-sidebar.html">Right Sidebar</a></li>
              <li><a href="no-sidebar.html">No Sidebar</a></li>
                 <li>
                    <a class="submenu fa-angle-down">Submenu</a>
                       <ul>
                          <li><a href="#">Option One</a></li>
                          <li><a href="#">Option Two</a></li>
                          <li><a href="#">Option Three</a></li>
                       </ul>
                 </li>
           </ul>
      </li>
  </ul>
</nav>

In second Submenu, the class submenu fa-angle-down must be empty.
I need indentify the first level of parent to apply that class only to level 0 items.

4 years ago

Could you show the macro you've got after suggested changes?

4 years ago Solution

I finally got the code that shows the result I want. It is the following (macros.html.twig file):

TWIG

{% macro nav_loop(page) %}
  {% import _self as macros %}
  {% for p in page.children.visible %}
    <li> 
      <a {% if p.routable != false %}href="{{ p.url }}"{% else %}{% endif %}{% if p.children.visible.count > 0 and loop.length > loop.index %} class="submenu fa-angle-down"{% else %}{% endif %}>
        {{ p.menu }}
      </a>
      {% if p.children.visible.count > 0 %}
      <ul>
        {{ macros.nav_loop(p) }}
      </ul>
      {% endif %}
    </li>
  {% endfor %}
{% endmacro %}

I've included the loop.index condition to get the result I wanted.

Thanks for your help, anyway.

vokoscreenNG-2022-03-21_13-02-08|690x369

last edited 03/21/22 by Pedro M

4 years ago

Was thinking about loop.index, but thought in macro the index resets. Good to know it doesn't

Topic	Replies	Views	Activity
Replacement of plugin recent_posts General · by Hanns Mattes, 9 hours ago	1	11	2 hours ago
Support Grav by following us on Product Hunt! General · by Andy Miller, 2 hours ago	0	7	2 hours ago
Well done Grav Team General · by Jerry Hunt, 5 days ago	2	136	1 day ago
Grav 2, Admin Next, API and Migrate are now in production! General · by pamtbaau, 1 day ago	1	93	1 day ago
Welcome to the new Grav Forums! General · by Andy Miller, 2 days ago	0	77	2 days ago

Suggested topics