My Responsive Nav

by jorgeluis

HTML

<header class="masthead" role="banner" itemscope="" itemtype="http://schema.org/WPHeader">

	<button class="menu-toggle">Menu</button>

	<a href="/" class="brand">MyCompany</a>

	<nav class="nav">
		<ul class="menu">
			<li class="menu-item"><a href="#">Item1</a></li>
			<li class="menu-item"><a href="#">Item2</a></li>
			<li class="menu-item"><a href="#">Item3</a></li>
		</ul>
	</nav>

</header>

CSS

.masthead {
  text-align: center;
}
.masthead .brand {
  display: inline-block;
  font-weight: bold;
}

.menu {
  position: absolute;
  left: -300px;
  width: 300px;
  opacity: 0;
  text-align: left;
  transition: opacity 1s linear, left 100ms linear;
}

.open .menu {
  left: 0;
  opacity: 1;
}

.menu-toggle {
  float: left;
}
@media screen and (min-width: 900px) {
  .nav, .menu, .menu-item {
    display: inline-block;
  }
  .menu-toggle {
    display: none;
  }
  .menu {
    position: relative;
    left: 0;
    width: auto;
    opacity: 1;
  }

}

JavaScript

var menuToggle = document.querySelector('.menu-toggle');
var menu = document.querySelector('.nav');

menuToggle.addEventListener('click', function() {
	if( hasClass(menu, 'open') ) {
  	removeClass(menu, 'open');
  } else {
  	addClass(menu, 'open');
  }
});


// these functions means you don't need jquery
function hasClass(el, className) {
	if (el.classList)
		return el.classList.contains(className);
	else
		return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}
function addClass(el, className) {
  if (el.classList)
    el.classList.add(className);
  else
    el.className += ' ' + className;
}
function removeClass(el, className) {
  if (el.classList)
 	 el.classList.remove(className);
	else
  	el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}