NPNYxN

index.html

<div id="outer-nav-control" data-icon="hamburger">
  <div id="nav-control" class="transition">
    <div id="bar-1" class="hamburger-line transition"></div>
    <div id="bar-2" class="hamburger-line transition"></div>
    <div id="bar-3" class="hamburger-line transition"></div>
    <div id="bar-4" class="hamburger-line transition"></div>
  </div>
</div>

npnyxn.markdown

NPNYxN

A Pen by Brenden Palmer on CodePen.

License.

script.js

var isOpen = false;
function toggleNav(){
  if (!isOpen){
    $('#outer-nav-control').attr('data-icon','close');
    isOpen = true;
    $('#bar-1,#bar-3').addClass('hide-hamburger-line');
    $('#bar-2').addClass('bar-2-x');
    $('#bar-4').addClass('bar-4-x');
  } else {
    $('#outer-nav-control').attr('data-icon','hamburger');
    isOpen = false;
    $('#bar-1,#bar-3').removeClass('hide-hamburger-line');
    $('#bar-2').removeClass('bar-2-x');
    $('#bar-4').removeClass('bar-4-x');
  }
}
$('#outer-nav-control').click(function(){
  toggleNav();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.transition{
  transition:all 0.4s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#outer-nav-control{
	background:#04052E;
	display:inline-block;
	height:100%;
	padding:1.25em;
	cursor:pointer;
}
#nav-control{
	height:1.25em;
	width:1.6em;
	position:relative;
}
.hamburger-line{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:1px;
	background:rgb(235,235,235);
}
#bar-2,#bar-4{
	top:50%;
}
#bar-3{
	top:100%;
}
#outer-nav-control:hover #nav-control .hamburger-line{
	background:rgba(195,195,255,0.9);
}
#outer-nav-control:active #nav-control .hamburger-line{
	background:rgba(195,195,255,1);
}
.hide-hamburger-line{
	opacity:0;
	filter:alpha(opacity=0);
}
#bar-2.bar-2-x{
	width:150%;
	left:-25%;
	-webkit-transform:rotate(45deg);
  transform:rotate(45deg);
  opacity:1;
  filter:alpha(opacity=100);
}
#bar-4.bar-4-x{
	width:150%;
	left:-25%;
  -webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
  opacity:1;
  filter:alpha(opacity=100);
}