Dropdown

Estilos para crear menús desplegables.

Contenido

Para crear un menú desplegable, se debe englobar tanto el lanzador como el menú en un div con la clase .dropdown y el atributo data-dropdown. Dentro, necesitamos añadir la clase .dropdown__trigger al elemento lanzador (por ejemplo un button, un a o un div) y el atributo data-dropdown-trigger. El menú desplegable se debe englobar en un elemento (normalmente un ul) con la clase .dropdown__content, y cada elemento de este menú debe llevar la clase .dropdown__item.

Para añadir un icono al lanzador, debemos usar un span con las clases normales de iconos

Encabezado del ejemplo

<nav class="dropdown" data-dropdown>
    <h3>
        <button
            data-dropdown-trigger
            class="btn btn--primary dropdown__trigger"
            aria-expanded="false">
                Lanzador
        </button>
    </h3>
    <ul class="dropdown__content dropdown__list" data-dropdown-content>
        <li class="dropdown__item"><a class="dropdown__link" href="#">Item 1</a></li>
        <li class="dropdown__item"><a class="dropdown__link" href="#">Item 2</a></li>
        <li class="dropdown__item"><a class="dropdown__link" href="#">Item 3</a></li>
        <li class="dropdown__item"><a class="dropdown__link" href="#">Item 4</a></li>
    </ul>
</nav>

Dropdown menú secundario

Este dropdown representa el menú secundario de las páginas que lo contienen, por lo tanto se debe usar el h1 como elemento principal del menú y a partir de aquí se agregan tantos ul y li como sean necesarios para crear la profundidad deseada. El atributo data-dropdown-secondary se pone en el elemento que sirve de wrapper del menú. En este caso se ve colocado en el h1 y en los li del primer ul ya que esos li sirven de wrapper al siguiente menú anidado dentro de él.

El atributo data-dropdown-secondary-trigger será el elemento que dispara el pliegue/despliegue del menú que llevará el atributo data-dropdown-secondary-content y que deberá estar al mismo nivel que el atributo ya mencionado data-dropdown-secondary-trigger.

Para acabar, si se quiere desplegar con animación habrá que añadir la clase modificadora .dropdown-secondary--animated en el mismo elemento donde se declara .dropdown-secondary.

Encabezado del ejemplo

<nav class="dropdown-secondary dropdown-secondary--animated"
     data-dropdown-secondary
     aria-label="Descripción menu">
    <h1 class="btnlink dropdown-title"
        data-aria-button aria-expanded="false"
        aria-controls="dropdown-secondary__content1"
        data-dropdown-secondary-trigger>
        <span class="dropdown-secondary__title">Titulo 1
            <span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="true"></span>
            <span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
        </span>
    </h1>
    <ul data-dropdown-secondary-content
        class="dropdown-secondary__menu dropdown-secondary-content"
        id="dropdown-secondary__content1"
        aria-hidden="true"
        style="max-height: 0;">
        <li data-dropdown-secondary class="dropdown-secondary__option">
            <button data-dropdown-secondary-trigger
                    class="btnlink dropdown-secondary__option__item dropdown_title"
                    aria-expanded="false"
                    aria-controls="dropdown-secondary__content2">
                <span>Item 1</span>
                <span class="icon icon--arrow-down icon--after is-active-hidden float-right" aria-hidden="true"></span>
                <span class="icon icon--arrow-up icon--after is-active-visible float-right" aria-hidden="true"></span>
            </button>
            <ul data-dropdown-secondary-content
                class="dropdown-secondary__submenu dropdown-secondary-content"
                id="dropdown-secondary__content2"
                aria-hidden="true"
                style="max-height: 0;">
                <li class="dropdown-secondary__option">
                    <a class="dropdown-secondary__option__subitem" href="#">Subitem 1</a>
                </li>
                <li class="dropdown-secondary__option">
                    <a class="dropdown-secondary__option__subitem" href="#">Subitem 2</a>
                </li>
            </ul>
        </li>
        ...
    </ul>
</nav>
Subir