arielsalminen · December 14, 2015 12:18 · grappler · Mar 4, 2013 · arielsalminen · Mar 5, 2013
diff --git a/nav.html b/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>
diff --git a/nav.js b/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);
diff --git a/nav.scss b/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; }
 }