simple font-awesome hamburger menu

simple-menu.css

.hidden {
  display: none;
}

simple-menu.html

<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>
 	

simple-menu.js

(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);

}());