[Supply] Sub Dropdown Menus

1-instructions.md

OUTDATED - Use only as inspiration

Nested / Sub Dropdown Menu for (Almost) Any Shopify theme Based off of Timber

1. Replace site-nav.liquid with the snippet below.
2. Add the styles below to timber.scss.liquid.
3. Go make popcorn.
4. Check your homepage to see if this has worked.
5. It didn't work.
6. Eat the popcorn and try to figure out what went wrong.

Important

If this modification breaks your theme, chances are the issues lies with these two lines: border: 1px solid $colorBorder; background-color: $colorBody;

Replace these sass variables with hex colours. i.e. border: 1px solid #ccc; background-color: #fff;

site-nav.liquid

<ul class="site-nav" id="accessibleNav">
  {% unless linklists.main-menu.links.first.url == '/' %}
  <li class="large--hide"><a href="/">Home</a></li>
  {% endunless %}
  {% for link in linklists.main-menu.links %}
  {% assign child_list_handle = link.title | handleize %}
  {% if linklists[child_list_handle].links != blank %}
  <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
    <a href="{{ link.url }}">
      {{ link.title }}
      <span class="icon-fallback-text">
        <span class="icon icon-arrow-down" aria-hidden="true"></span>
      </span>
    </a>
    <ul class="site-nav--dropdown">
      {% for child_link in linklists[child_list_handle].links %}
      {% assign grand_child_list_handle = child_link.title | handle %}
      {% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %}
      <li class="{% if childlink.active %}site-nav--active{% endif %} grand">
        <a href="{{ child_link.url }}">
          {{ child_link.title }}
          <span class="icon-fallback-text">
            <span class="icon icon-arrow-down" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="site-nav--dropdown--sub">
          {% for grand_child_link in linklists[grand_child_list_handle].links %}
          <li>
            {{ grand_child_link.title | link_to: grand_child_link.url }}
          </li>
          {% endfor %}
        </ul>
      </li>
      {% else %}
      <li>
        {{ child_link.title | link_to: child_link.url }}
      </li>
      {% endif %}
      {% endfor %}
    </ul>
  </li>
  {% else %}
  <li {% if link.active %}class="site-nav--active"{% endif %}>
    <a href="{{ link.url }}">{{ link.title }}</a>
  </li>
  {% endif %}
  {% endfor %}

  {% if shop.customer_accounts_enabled %}
  {% if customer %}
  <li class="customer-navlink large--hide"><a href="/account">View Account</a></li>
  <li class="customer-navlink large--hide">{{ 'Log out' | customer_logout_link }}</li>
  {% else %}
  <li class="customer-navlink large--hide">{{ 'Sign in' | customer_login_link }}</li>
  {% if shop.customer_accounts_optional %}
  <li class="customer-navlink large--hide">{{ 'Create an Account' | customer_register_link }}</li>
  {% endif %}
  {% endif %}
  {% endif %}
</ul>

timber.scss.liquid

.site-nav--dropdown{
  overflow:initial;
}

.grand .icon-arrow-down{
  -ms-transform: rotate(-90deg); /* IE 9 */      
  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
  transform: rotate(-90deg);
}

.site-nav li.grand{
  position:relative;
}

.site-nav--dropdown--sub{
  position:absolute; 
  display:none; 
  min-width: 160px;
  right: -160px;
  top: -1px;
  border: 1px solid $colorBorder;
  background-color: $colorBody;
}

.site-nav li.grand:hover > .site-nav--dropdown--sub{
  display:block;
}

Thanks for the example, this has really helped me move forward, the timber.css.liquid was clearly my issue. I had to play with the width and right setting to get the sub dropdown to show up. This is my first liquid attempt so I am learning and this has helped in a huge way. Again, many thanks.

Great Help! Just registered to thanks you :)

Hi Kyle,
I tried it for my react theme but it is not worked. Sup dropdowns are looking one under the other. Also, my theme did not have timber.scss.liquid and created one and copied all the codes. I do not know what is wrong? It is because of theme or missing codes I guess. Can you help about it?

Hey, thanks for the snippet :) it works very well with my supply theme, but it is not working in the mobile view, I don't know I miss something, i cannot see second level menu in mobile. Can you please help me on it?

Wow...This solution is just awesome ,,,,Thank you very very very much........

Hi Is there any way I can create many collection filters where I select the specific one and hides all other unnecessary collection?

Thank you for this. It worked first time with the supply theme. Just a query, is there a way to have the "grandchild" list not appear below the "child list" and rather, when hovering over "child list" the grandchild" list appears to the right.

See an example if found on another site:

When hovering the mouse over Speakers, the categories under Speakers appear to the right.

Hi Kyle,
Tried the solution. Works great in Chrome but not in IE. Could what You hint me what should I do?
Thanks in advance

Thanks! Thanks! Thanks! I'm only register to GitHub to thanks you. Cheers!

Thanks so much for this, worked perfectly!

Hi there. This works great on the desktop view (thank you!!) but I can't see the third level menu options on the mobile view. Would you be able to help with that as I'm really stuck! Thanks again...

Hey! Worked great for me also so thanks so much! but... the last

in -> our products -> coffee machines: dropdown is not aligned with the others. Code is the same as original snippet.

Link: https://enbizio.com/

Thanks!!

For everyone that is pulling their hair out about this, I updated the code to make it work in IE. All I did was updated below. I commented out with // and changed initial to visible.

.site-nav--dropdown{
// overflow:initial;
overflow:visible;
}

Example shown here: https://discgolfshopping.com

@DiscGolfShopping - looks like that has some issues with mobile devices and the child menus hang off the side of the browser, mostly out of view.