Highlighting multiple menus...

by redInk - Member - 05:22AM, May 14, 2008

Heres The Lowdown
I have been working on a page the uses multiple link-lists to create a horizontal main menu with submenu navigation based on the page you are currently viewing. Things have been working well thus far but things get interesting when you want to have multiple menus to be selected without including both link names in the page title. I also see that the code I am using works most of the time but not all the time.

Main Menu Code

<ul id="navigate">
    {% for link in linklists.main-menu.links %}
        {% if page_title contains link.title %}
            <li class="selected">{{ link.title | link_to: link.url }}</li>
        {% else %}  
            <li>{{ link.title | link_to: link.url }}</li>
        {% endif %}
    {% endfor %}
</ul>

This code works great to select the proper section when navigating to the first page, and pages from the sub menu. The problem arises when you try to keep the main menu item selected when you are viewing the product page.

This is interesting since the collection titles are lost when you navigate to product pages. I solved the problem by adding the following code.

<a href="{{product.url | within: collection }}" title="{{ product.title | escape }}">
    <img src="{{ product.images.first | product_img_url: 'small' }}" alt="{{ product.title | escape }}" /></a>
</div>

This works to add the collection name to the page title but will not allow me to select the link using the code above. The same problem exists with the sub menu.

Sub Menu Code

{% if page_title contains 'Guys' %}
    <ul id="subNav" class="guys">
        {% for link in linklists.guys.links %}
            {% if page_title contains link.title %}
                <li class="active">{{ link.title | link_to: link.url }}</li>
            {% else %}  
                <li>{{ link.title | link_to: link.url }}</li>
            {% endif %}
    </ul>
{% endif %}

Does anyone have any idea how I can achieve this without adding the keywords to the page title? It wold be nice to find a way to do this that works 99% of the time.

Thanks in advance…

-Edward

redInk

Member

04:11AM, May 17, 2008

Humm… I was hoping someone would have some input on this… Does anyone know anyone I can contact for help?

Christina

Miss Manners

07:58AM, May 17, 2008

If your main menu contains links that are named identically to your product types, then this should solve your first problem:

<ul id="navigate">
{% for link in linklists.main-menu.links %}
{% case template %}
    {% when 'product' %}
       {% if product.type == link.title %}
          <li class="selected">{{ link.title | link_to: link.url }}</li>
       {% else %}
            <li>{{ link.title | link_to: link.url }}</li>
        {% endif %}
    {% else %}
        {% if page_title contains link.title %}
            <li class="selected">{{ link.title | link_to: link.url }}</li>
        {% else %}  
            <li>{{ link.title | link_to: link.url }}</li>
        {% endif %}
    {% endcase%}
{% endfor %}
</ul>

Your second (submenus) is more involved.
You can contact me: christina at divalove.com

---

on ice

Mike van Lammeren

Member

10:33PM, May 29, 2008

What was the final solution to this?

Here’s what I came up with.

You must login to post a comment!

Don't have an account yet? Sign up for one.