Skip to content

Instantly share code, notes, and snippets.

@juque

juque/anidamiento_menu.html

Last active August 29, 2015 13:58
Download ZIP

Revisions

  1. juque revised this gist Sep 23, 2014. No changes.
  2. juque renamed this gist Apr 6, 2014. 1 changed file with 0 additions and 0 deletions.
    0 anidamiento_menu.liquid → anidamiento_menu.html
    View file
    File renamed without changes.
  3. juque revised this gist Apr 6, 2014. No changes.
  4. juque revised this gist Apr 5, 2014. No changes.
  5. juque created this gist Apr 5, 2014.
    67 changes: 67 additions & 0 deletions anidamiento_menu.liquid
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    {% 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>