am-impact / amnav

Navigation plugin for Craft
168 stars 19 forks source link

Code for bootstrap with dropdowns #84

Open ChristianWatkins opened 7 years ago

ChristianWatkins commented 7 years ago

Hi, thanks for the great and user friendly plugin.

I am stuck on implementing a bootstrap menu with dropdown including caret. As far as I can see I need to use the raw output to be able to include: data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" as it only possible to include classes and IDs when doing it this way: {% set nav = craft.amNav.getNavRaw("yourNavigationHandle") %}

Could you please give a code example of a working bootstrap integration?

ChristianWatkins commented 7 years ago

Found a solution. I did it like this:

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

{% macro addNodeToNavigation(node, index) %} {%- set nodeClasses = [] -%} {%- if node.hasChildren -%} {%- set nodeClasses = nodeClasses|merge(['has-children']) -%} {%- endif -%} {%- if node.active or node.hasActiveChild -%} {%- set nodeClasses = nodeClasses|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 %}>

    {% if node.hasChildren %}

        <a href="{{ node.url }}" title="{{ node.name }}"{% if node.blank %} target="_blank"{% endif %} data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">{{ node.name }} <span class="caret"></span></a>

        <ul class="nav__level{{ (node.level + 1) }} dropdown-menu role="menu">
            {% for subnode in node.children %}
                {{ _self.addNodeToNavigation(subnode, loop.index) }}
            {% endfor %}
        </ul>
        {% else %}
        <a href="{{ node.url }}" title="{{ node.name }}"{% if node.blank %} target="_blank"{% endif %}>{{ node.name }}</a>
    {% endif %}
</li>

{% endmacro %}