Dropdown-Menu (mobile)

Veja como utilizar

Acrescentar um data-menu="button" e um aria-expanded="false" no botão menu-mobile. Colocar também um data-dropdown="link" nos elementos que irão ativar os menus drop down e um data-dropdown="content" nos menus dropdown. Inserir também um data-menu="close" nos links do menu, para o mesmo fechar quando estiver em mobile.

Para o menu abrir lateralmente, acrescentar uma classe horizontal no elemento que contém a classe menu-list.

HTML Exemplo

 <nav class="menu">
   <button class="menu-button" data-menu="button" aria-expanded="false">Menu</button>
   <ul class="menu-list" data-menu="list" id="menu">
     <li><a href="" data-menu="close">Home</a></li>

     <li class="drop-down" data-dropdown>
       <a class="drop-down__link" href="sobre.html" data-dropdown="link">Sobre</a>
      <ul class="dropdown-menu" data-dropdown="content">
        <li><a href="empresa.html">A Empresa</a></li>
        <li><a href="http://leandrofialho.com/">Equipe</a></li>
        <li><a href="socios.html">Sócios</a></li>
        <li><a href="investidores.html">Investidores</a></li>
      </ul>
    </li>

     <li class="drop-down" data-dropdown>
       <a class="drop-down__link" href="sobre.html" data-dropdown="link">Tipos de |negócios</a>
       <ul class="dropdown-menu" data-dropdown="content">
         <li><a href="">Negócios 01</a></li>
         <li><a href="">Negócios 02</a></li>
         <li><a href="">Negócios 03</a></li>
         <li><a href="">Negócios 04</a></li>
       </ul>
     </li>
     <li><a href="" data-menu="close">Faq</a></li>
     <li><a href="#contact" data-menu="close">Contato</a></li>
     <li><a aria-controls="#login" data-modal="open">Login →</a></li>
   </ul>
 </nav>