Small viewport nav

nav.css

.l-nav {
	&--capable {
		position: absolute;
		right: 0;
		top: -500%;
	}

	&--capable-open {
		top: 0;
		right: 5.46875%;
		padding-top: 5.75em;
	}
}

nav.html

		<nav class="l-nav" id="menu" role="navigation">
			<ul class="main-menu">
				<li><a href="#1">Home</a></li>
				<li><a href="#1">About us</a></li>
				<li><a href="#1">Services</a></li>
				<li><a href="#1">News</a></li>
				<li><a href="#1">Contact us</a></li>
			</ul>
		</nav>

nav.js

(function(win, doc, undefined) {
	if('addEventListener' in win && 'classList' in doc.createElement('a')) {
		var nav = doc.getElementById('menu'),
			toggler = helper.get_single_by_class('js-toggle'),

			toggle_nav = function(e) {
				nav.classList.toggle('l-nav--capable-open');

				e.preventDefault();
			},

			close_nav = function(e) {
				var clicked = e.target;

				if(clicked.nodeName.toLowerCase() === 'a') {
					nav.classList.remove('l-nav--capable-open');
				}
			};

		nav.classList.add('l-nav--capable');

		toggler.addEventListener('click', toggle_nav, false);
		nav.addEventListener('click', close_nav, false);
	}
})(this, this.document);