Nav with a dropdown

New Member
35 0 0

I've seen some other posts on this but it seems like everybody's situation is a little bit different and I want to make sure I'm understanding the basic concepts right.

I have a need to install a dropdown nav to replace my regular horizontal nav.  It's going to be basically static, so I don't mind doing it with link lists.  I just have too many pages, many of which could be logically grouped, to fit in a standard horizontal nav.

Here's the whole of my nav code right now, which I think is basically the default moderno code:

 

<div id="nav">{% capture active_url %}{% if template == "index" %}/{% elsif template == "collection" %}/collections/{{ collection.handle }}{% elsif template == "product" %}
{% if collection %}/collections/{{ collection.handle }}{% endif %}/products/{{ product.handle }}{% elsif template == "page" %}/pages/{{ page.handle }}
{% elsif template == "blog" %}/blogs/{{ blog.handle }}{% elsif template == "cart" %}/cart{% elsif template == "search" %}/search{% endif %}{% endcapture %} <ul>{% for link in linklists.main-menu.links %} <li{% if forloop.last %}{% endif %}><a href="{{ link.url }}"{% if link.url == active_url %} class="active"{% endif %}>
{{ link.title }}</a></li>{% endfor %} <li><a href="/cart"{% if template == "cart" %} class="active"{% else %} id="end"{% endif %}>Cart ({{ cart.item_count }}
{{ cart.item_count | pluralize: 'item', 'items' }})</a></li> </ul> </div>

 

I found a post from last year that showed the following example code to create a dropdown menu item, which I've been thinking of trying:

 

<a class="drop_down_menu_a" onMouseOver="mouse_over(1)" href="/collections/gear"><span>Gear</span></a>
  <div id="expand_down1" class="expand_down">
   {% for link in linklists.Gear.links %}
     <li>{{ link.title | link_to: link.url }}</li>
   {% endfor %}
  </div>

 

I have a few questions and I hope I'm able to express them coherently (you can probably tell I'm not a programmer, though I can usually figure stuff out).  I was getting ready to test some of this stuff in Vision but it seems I really can't, I need to do it on the live site.  So I want to ask first.

1. How can I keep the active link highlighted?  That doesn't seem accounted for in the code example above, and I'm not sure if I can just keep some of my existing code and have it work with the dropdown as defined above.  ie. if the page is in the "store" link list, I'd like "store" to be highlighted.

2. Am I right in that I would be creating a separate div for each main menu item?  Or just a separate for/endfor?  If so, do even nav items without a submenu need to have a link list?

I guess that's about all I can think of right now.  Normally this is the kind of thing I'd just try out but I'm pretty confident I'll get it wrong at first, and my site actually gets a lot of visitors so I'd like to be able to get it right at least within the first few tries.

Thanks for any help...

http://www.tokyorebel.com
0 Likes