Skip to content

Instantly share code, notes, and snippets.

@viljamis
Last active Dec 14, 2015
Embed
What would you like to do?
Simple responsive navigation toggle script without library dependencies and with touch screen support (349 bytes minified and gzipped). Live demo: http://codepen.io/viljamis/full/gAatl
<!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>
// 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);
@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; }
}
@grappler
Copy link

grappler commented Mar 4, 2013

How would the html look like?

Loading

@viljamis
Copy link
Author

viljamis commented Mar 5, 2013

@grappler Added the html : )

Loading

@justincavery
Copy link

justincavery commented Mar 5, 2013

Awesome work (as per usual). Let me know if you've already got this up as a CodePen, would love to link it off as part of some resources I'm putting together (and could also go into Brads pattern library).

Loading

@viljamis
Copy link
Author

viljamis commented Mar 5, 2013

There will be a demo soon online, just writing a short article about this…

Loading

@viljamis
Copy link
Author

viljamis commented Mar 5, 2013

Loading

@viljamis
Copy link
Author

viljamis commented Mar 5, 2013

Made a plugin out of this and moved this code to a repo: https://github.com/viljamis/TinyNav2.js Will be updating things there in the future…

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment