[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;
}

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.