am-impact / amnav

Navigation plugin for Craft
168 stars 20 forks source link

How to add class to anchor tag within <li> #44

Closed sethburtonhall closed 9 years ago

sethburtonhall commented 9 years ago

by default active is added to the <li>. Is it possible to add active to the <a>?

hubertprein commented 9 years ago

Sorry for the late reply.

I could make an option for this in the getNav tag, but for now, you can simply use the getNavRaw tag and adjust the navigation in the way you want it.

In your case, based on the example in the readme:

{% set nav = craft.amNav.getNavRaw("yourNavigationHandle") %}

{% macro addNodeToNavigation(node, index) %}
    {%- set linkClasses = [] -%}
    {%- set nodeClasses = [] -%}
    {%- if node.hasChildren -%}
        {%- set nodeClasses = nodeClasses|merge(['has-children']) -%}
    {%- endif -%}
    {%- if node.active or node.hasActiveChild -%}
        {%- set linkClasses = linkClasses|merge(['active']) -%}
    {%- endif -%}
    {%- if node.level == 1 and index == 1 -%}
        {%- set nodeClasses = nodeClasses|merge(['first']) -%}
    {%- endif -%}
    {%- if node.listClass|length -%}
        {%- set nodeClasses = nodeClasses|merge([node.listClass]) -%}
    {%- endif -%}

    <li{% if nodeClasses|length %} class="{{ nodeClasses|join(' ') }}"{% endif %}>
        <a href="{{ node.url }}" title="{{ node.name }}"{% if node.blank %} target="_blank"{% endif %}{% if linkClasses|length %} class="{{ linkClasses|join(' ') }}"{% endif %}>{{ node.name }}</a>
        {% if node.hasChildren %}
            <ul class="nav__level{{ (node.level + 1) }}">
                {% for subnode in node.children %}
                    {{ _self.addNodeToNavigation(subnode, loop.index) }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

<nav class="navmain">
    <ul class="nav">
        {% for node in nav %}
            {{ _self.addNodeToNavigation(node, loop.index) }}
        {% endfor %}
    </ul>
</nav>
sethburtonhall commented 9 years ago

I am sure an option would benefit other users, seems like a common use case.

Thanks for the guidance, I ending up working this out by styling the <a> via li.active