anidamiento de menú

anidamiento_menu.html

{% comment %}

Creando menús de navegación se tiene un control completo de las opciones que ahí
aparecen. En el siguiente ejemplo se creará una navegación anidada utilizando
4 menús.

Se asume que se tiene creado un menu de nombre `global` y 3 submenus de nombres: 

- `alfa-local` 
- `beta-local` 
- `gama-local`

Se recorrerá el menú `global` y se irá preguntando por el `slug` de cada item,
luego se hará el mismo bucle al submenú que coincida con el slug del global. 

Una de las ventajas de anidar el menú de esta forma es que se puede cambiar el
orden de las opciones como mejor te parezca. En la sección  Navegación y dentro
del menú podrás ver una opción "Ordenar".

{% endcomment %}

<ul class="global">
    {% for link in menus.global.links %}
    <li>
        <a href="{{ link.url }}">{{ link.title }}</a>

    {% comment %} primera opción de submenu (alfa) -------------------------------- {% endcomment %}

            {% if link.slug == 'alfa' %}
                <ul class="submenu">
                {% for link in menus.alfa-local.links %}
                    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
                {% endfor %}
                </ul>
            {% endif %}


    {% comment %} segunda opción de submenu (beta) -------------------------------- {% endcomment %}


            {% if link.slug == 'beta' %}
                <ul class="submenu">
                {% for link in menus.beta-local.links %}
                    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
                {% endfor %}
            </ul>
            {% endif %}


    {% comment %} tercera opción de submenu (gama) -------------------------------- {% endcomment %}


        {% if link.slug == 'gama' %}
            <ul class="submenu">
            {% for link in menus.gama-local.links %}
                <li><a href="{{ link.url }}">{{ link.title }}</a></li>
            {% endfor %}
            </ul>
        {% endif %}


    {% comment %} (si hubiese una cuarta opción de submenu debe ir acá) ------------- {% endcomment %}


    </li>
    {% endfor %}
</ul>