toggle menu 반응형

document.body.classList.add('js');
var toggle    = document.querySelector('#toggle-navigation');
var menu      = document.querySelector('#menu');
var menuItems = document.querySelectorAll('#menu li a');

toggle.addEventListener('click', function(){
  if (menu.classList.contains('is-active')) {
    this.setAttribute('aria-expanded', 'false');
    menu.classList.remove('is-active');
  } else {
    menu.classList.add('is-active'); 
    this.setAttribute('aria-expanded', 'true');
  }
});

 

<nav>
  <button id="toggle-navigation" aria-expanded="false">
    <span class="icon-menu"></span><span class="hidden">Menu</span>
  </button>
  <ul id="menu">
    <?php foreach ($navigation as $link) { ?>
    <li>
        <a href="category.php?id=<?= $link['id'] ?>" 
        <?= ($section == $link['id'] ) ? 'class="on" aria-current="page"' : '' ?>>
        <?= html_escape($link['name']) ?>
        </a>
    </li>
    <?php } ?>
  </ul>
</nav>