.c-drawer

  • /src/css/object/component/_drawer.scss

Drawer component

html

<div style="min-height: 200px; position: relative">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="hamburger-btn">
    <ul class="c-drawer__menu">
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item">
        <a href="#">menu</a>
        <div class="c-drawer__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="c-drawer__submenu" aria-hidden="true">
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div id="hamburger-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>