hamburger-menu.js

/**
 * Assumes use of font awesome for menu and 'x' icons.
 * Also assumes that there is a '.hidden' class set up in your css
 * with display: none;
 *
 * Usage:
 *
 * 	<a href="javascript:void(0);" id="menuButton" class="pull-right">
 *		<i class="fa fa-bars pull-right"></i>
 *	</a>
 *
 *
 *	<nav id="menu" class="hidden text-center">
 *		<ul>
 *			<li><a href="about.html">About</a></li>
 *			<li><a href="shop.html">Shop</a></li>
 *			<li><a href="index.html">Portfolio</a></li>
 *		</ul>
 *	</nav>
 *
 **/

(function () {
	var menuButton = document.getElementById('menuButton');
	var menuIcon = menuButton.children[0];
	var menu = document.getElementById('menu');
	var menuOpen = false;

	function onMenuClick(event) {
		if (menuOpen) {
			menu.classList.add('hidden');
			menuIcon.classList.remove('fa-times');
			menuIcon.classList.add('fa-bars');

		} else {
			menu.classList.remove('hidden');
			menuIcon.classList.add('fa-times');
			menuIcon.classList.remove('fa-bars');
		}

		menuOpen = !menuOpen;
		event.preventDefault();

	}

	menuButton.addEventListener('click', onMenuClick);

}());