arielsalminen/nav.html

## nav.html
<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <title>Nav toggle</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
  <body>
    <ol id="nav" class="closed">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Sub item</a></li>
      <li><a href="#">Sub item</a></li>
    </ol>
    <a href="#nav" id="nav-toggle">Menu</a>
  </body>
</html>

## nav.js
// Adds "js" class to <html>
var doc = document,
  docEl = doc.documentElement;
docEl.className = docEl.className.replace(/(^|\s)no-js(\s|$)/, " js ");

// Nav toggle for mobile
(function (w) {

  w.navigation = function () {
    var nav_open = false,
      doc = w.document,
      nav = doc.getElementById('nav'),
      nav_toggle = doc.getElementById('nav-toggle'),
      nav_function = function () {
        if (nav_open === false) {
          nav.className = nav.className.replace('closed', 'opened');
          nav_open = true;
        } else {
          nav.className = nav.className.replace('opened', 'closed');
          nav_open = false;
        }
        return false;
      };

    // Touchstart event fires before the mousedown event, and can wipe the mousedown event
    nav_toggle.onmousedown = function () {
      nav_function();
    };
    nav_toggle.ontouchstart = function () {
      nav_toggle.onmousedown = null;
      nav_function();
    };
    nav_toggle.onclick = function () {
      return false;
    };
  }

  // Run on domready (w.load as a fallback)
  if (w.addEventListener) {
    w.addEventListener("DOMContentLoaded", function () {
      w.navigation();
      // Run once only
      w.removeEventListener("load", w.navigation, false);
    }, false);
    w.addEventListener("load", w.navigation, false);
  } else if (w.attachEvent) {
    w.attachEvent("onload", w.navigation);
  }

})(this);

## nav.scss
@mixin breakpoint($media) {
  @if $media == lap {
    @media only screen and (min-width: 40em) { @content; }
  }
}

#nav-toggle {
  @include breakpoint(lap) { display: none; }
}

.js #nav {
  height: 0;
  overflow: hidden;
  @include transition(height .5s ease);
  @include breakpoint(lap) { height: auto; }
  &.opened { height: 4em; }
}