Menu Help.... PLEASE

Tourist
12 0 2

Finally found this code online which allows you to do 3 tier menus:

<nav role="navigation">
  <ul>
    {% for link in linklists.main-menu.links %}
    {% assign child_list_handle = link.title | handle %}
    {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
    <li class="has-dropdown">
      {{ link.title | link_to: link.url }}
      <ul>
        {% 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="has-dropdown">
          {{ child_link.title | link_to: child_link.url }}
          <ul>
            {% 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>
      {{ link.title | link_to: link.url }}
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</nav>

And can't figure out how to merge it with my current menu (Spent the last 5 hours on it)

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 %}

any and all help would greatly appreciated.

Thank you!!!

0 Likes
Tourist
12 0 2

This menu thing is a make or break deal for us.  We really want to move over to Shopify from our current host.  But we really don't / can't soak in another $10k on designers, etc. 

On a side note, our collections and products get automatically imported from our POS system.  We have over 5000 SKUs and counting. 16 main categories, with about 50ish sub-categories, and 100s of sub-sub-categories.  A side-bar menu system is a must!  To get an idea please check out www.ibeadcanada.com

Any and all help would be GREATLY appreciated.

 

0 Likes
Shopify Expert
9974 84 1491

It's possible to do 3 or more levels of navigation with link-lists. You've got some example code already up top for three (which seems to match the current site) so at what point are you getting stuck?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Tourist
12 0 2

code 1 allows for 3 tiers, yes.... but is meant for horizontal menus

code 2 is side menu and does the "accordion" thing.  trying to merge them both somehow to get the best of both worlds, but I end up with some like:

Products

               Beads

              Pendats

Beads

             Czech Seedbeads

 

instead of:

 

Products

         Beads

                    Czech seedbeads

 

This thing is killing me!   ugh

 

                               

0 Likes
Shopify Expert
9974 84 1491

This is not even remotely checked or tested, nor know if it's what you actually need. Big enough disclaimer ;)

<ul>
	<li><a href="/collections/all">Products</a>
		{% if linklists.main-menu.size > 0 %}
			<ul>
				{% for link in linklists.main-menu.links %}
					<li>{{ link.title | link_to: link.url }}</li>
				{% endfor %}
			</ul>
		{% endif %}
	</li>
	{% if linklists.main-menu.size > 0 %}
	{% for link in linklists.main-menu.links %}
	<li>{{ link.title | link_to: link.url }}
		{% assign child_list_handle = link.title | handle %}
		{% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
		<ul>
			{% for l in linklists[child_list_handle].links %}
				<li>{{ l.title | link_to: l.url }}
					{% assign grandchild_list_handle = l.title | handle %}
					{% if linklists[grandchild_list_handle] and linklists[grandchild_list_handle].links.size > 0 %}
					<ul>
						{% for grand_link in linklists[grandchild_list_handle].links %}
							<li>{{ grand_link.title | link_to: grand_link.url }}</li>
						{% endfor %}
					</ul>
					{% endif %}
				</li>
			{% endfor %}
		</ul>
		{% endif %}
	</li>	
	{% endfor %}
	{% endif %}
</ul>

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes