[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 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.