Estilos para crear menús desplegables.
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.
span con las clases normales de iconos<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>
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.
<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>