Multi-level menus in Shopify: Is there a definitive answer?

Shopify Partner
29 0 0

Here is the screenshot:

 

0 Likes
Tourist
20 0 2

Is there any way the 'barebones' code above could be expanded on a bit? I'm struggling with implementing what you have above with the code on the New Standard theme. I understand your format above, but the code for this theme does the navigation a bit differently.

0 Likes
Highlighted
Tourist
12 0 2

Hi Caroline,

Been scouring the internet for just your code. THANK YOU!!!!  However been racking my brain around on how to merge your code with this one:

 

<ul id="main-menu" class="accordion">
                      {% for link in linklists.main-menu.links %}         
                        {% assign has_sub_menu = false %}
                        {% assign parent_link_active = false %}
                        {% assign child_list_handle = link.title | handle %}
                        {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
                               {% assign has_sub_menu = true %}
                               {% for l in linklists[child_list_handle].links %}
                                 {% if l.active %}
                                        {% assign parent_link_active = true %}
                                 {% endif %}
                               {% endfor %}
                        {% endif %}   
     
                        {% if has_sub_menu %}
               
                        <li>    
                               <a href="#" class="accordion-button">{{ link.title }}
                            <span>{% if link.active or parent_link_active  %}-{% else %}+{% endif %}</span>
                               </a>
                               <div class="accordion-content" {% unless parent_link_active %}style="display:none"{% endunless %} >
                                 {% for l in linklists[child_list_handle].links %}
                                   <a href="{{ l.url }}" {% if l.active %}class="active"{% endif %}>{{ l.title }} </a>
                                 {% endfor %}
                               </div>
                            </li>                         
               
                        {% else %}
              
                          <li><a href="{{ link.url }}">{{ link.title }}</a></li>
                        {% endif %}
                      {% endfor %}

 

Can you please help? 

Thanks a million.

0 Likes
New Member
1 0 0

Hello, I also have the same issue,  my theme is Lingerie, there is really no support anymore, the email sends me to monster themes.    My code is as follows, hopefully you guys  can help me as well merge that nav code into this one.

<nav role="navigation">

          <div class="row-fluid">

            <div class="span12">

              <ul class="sf-menu">

 

                {% for link in linklists[settings.main_nav].links %}

                

                {% assign has_sub_menu = false %}

                {% assign has_sub_categories = false %}

                {% assign parent_link_active = false %}

                {% assign child_list_handle = link.title | handle %}

                {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}

                  {% assign has_sub_menu = true %}

                  {% for l in linklists[child_list_handle].links %}

                    {% if page_title == l.title %}

                      {% assign parent_link_active = true %}

                    {% endif %}

                  {% endfor %}

                {% elsif link.type == 'collection_link' and link.object.all_tags.size > 0 %}

                  {% assign has_sub_categories = true %}

                {% endif %}

                <li class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if link.active or parent_link_active %} active{% endif %}{% if has_sub_menu or has_sub_categories %} has-dropdown{% endif %}">

                  {{ link.title | link_to: link.url }}

                  {% if has_sub_menu or has_sub_categories %}

                  <ul>

                    <li></li>

                    {% if has_sub_menu %}

                      {% for l in linklists[child_list_handle].links %}

                      <li class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if l.active %} active{% endif %}">

                        <a class="{% if forloop.first %}first{% elsif forloop.last %}last{% endif %}" href="{{ l.url }}">{{ l.title }}</a>

                      </li>

                      {% endfor %}

                    {% elsif has_sub_categories %}

                      {% for tag in link.object.all_tags %}

                      <li class="{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if current_tags contains tag %} active{% endif %}">

                        <a class="{% if forloop.first %}first{% elsif forloop.last %}last{% endif %}" href="{{ link.url }}/{{ tag | handle }}">{{ tag }}</a>

                      </li>

                      {% endfor %}

                    {% endif %}

                  </ul>

                  {% endif %}

                </li>

                {% endfor %}

              </ul>

            </div>

          </div>

        </nav>

 

thanks a trillion :) 

 

cheers!

0 Likes
Shopify Staff
Shopify Staff
5704 0 276

Multi-level drop-down menus certainly work in Shopify. Here are themes that come with them out of the box: http://docs.shopify.com/support/your-website/themes/which-themes-have-nested-menus

All themes by Out of the Sandbox come with them: https://themes.shopify.com/designers/out-of-the-sandbox

Although some code is provided in the forums (e.g. here), it's not code that you can simply copy and paste in the right spot, and be done, unfortunately. Drop-down menus rely on markup (HTML), CSS and, often, JavaScript, that will vary from theme to theme. Once you have the markup and Liquid figured out, you still need to worry about CSS, and possibly JavaScript.

If you are able to figure out the HTML and Liquid, but not the CSS and JavaScript, I'd recommend using a framework, for example, the drop-down component in Bootstrap: http://getbootstrap.com/components/#nav-dropdowns You would then move away from using your theme's CSS and JavaScript for your menu, and implement all drop-down levels using the framework of your choice.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
New Member
5 0 0

I am looking forward to have sub menus in my navigation.

Please check the attached image. I have already spent much on my store ergobrothers.myshopify.com.

I do have lots of products and needed a perfect navigation menu bar.

Kindly help me out with the code and where it needs to be placed.

Thank you :)

0 Likes
New Member
2 0 0

Hi Caroline

 

I´m using Threadify Theme. It has no drop down´s built in. I´m a little new on using code and opening an online store and i´ve been trying your code in theme.liquid. But when i insert it, i get a disorganized second nav menu on the upper left of my screen my front page and i would just like it to work with my current nav menu. I will appreciate any help you can give me. I attached the screen of what´s happening. My shop is www.bigfootmx.com ;

 

Thank you

0 Likes
New Member
2 0 0

Hello Patchman

I would really appreciate your help, as i am having what i think is the same issue you were having when you made this post to caroline.

I´m using Threadify, a non built in drop down, y used Caroline´s code in theme.liquid and now i get the sub menus working but not as a drop down, they just appear under the main link.

I read you just re-named the li and ul but, i don´t get how to do that, i´m a beginer on this.

Your help will be greatly appreciated.

0 Likes
New Member
9 0 0

Hello,

You can find a full solution for this (You can use 3, 4 ...levels for your category).

http://vegathemes.com/2014/04/how-to-create-multi-level-menus-in-shopify/

I hope that it is helpful for you.

Building Shopify themes, custom design, custom development.
0 Likes
Shopify Partner
1 0 0

I am also having problem with sub menu. I want as we put cursor on different bar on main menu it drop down to show sub categories similarly if we move our cursor on sub categories it will show further categories.

hat

1 hat a

         hat a1

        hat a 2

2 hat 

but they show when we move cursor on them

pls help 

me

 

0 Likes