Simple mobile menu

_simple-mobile-menu.md

If you don’t run any other JavaScript on your site but need a mobile menu, this will do the trick. Simple media queries make sure the menu button shows up on large screens only, and the navigation menu is hidden from small screens. By progressively enhancing the nav element with a data-menu attribute, the button toggles visibility of the menu.

HTML:
/nav.html

CSS: /styles.css

JS: /menu.js

Note that I didn’t take accessibility into account, and if JavaScript is disabled on small screens, your website visitors won’t have any way to navigate :)

menu.js

(function() {
  const qs = query => document.querySelector(`[data-${query}]`)
  const click = (el, listener) => el.addEventListener('click', listener)
  window.addEventListener('DOMContentLoaded', () => {
    const menu = qs('menu')
    click(qs('menu-button'), () => menu.classList.toggle('xs-hidden'))
  })
}())

nav.html

<button class="l-hidden" data-menu-button>
  menu
</button>

<nav class="xs-hidden" data-menu>
  <ol>
    <li>
      <a href="/">Home</a>
    </li>
  </ol>
</nav>

styles.css

@media (max-width: 767px) {
  .xs-hidden {
    display: none;
  }
}
@media (min-width: 768px) {
  .l-hidden {
    display: none;
  }
}