Menu for Personal Website

index.html

<div id="wrap">

  <nav>
    <div id="button">
      <div id="nav-icon">
       <span></span>
       <span></span>
       <span></span>
      </div>
      <div id="menu">Menu</div>
    </div>
    <div id="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  
</div>

Menu for Personal Website.markdown

Menu for Personal Website

Many folks use these, and their merits can be argued, but for practical purposes, the "Hamburger" icon has familiarity going for it, at the very least. These animations add a little more transparency to what it means from a UI perspective by transforming it into another recognizable icon - the closing "x". Full walkthrough here: http://designcouch.com/home/why/2014/06/23/playing-with-hamburger-icon-animations/

Forked from Jesse Couch's Pen Menu "Hamburger" Icon Animations.

Forked from Jesse Couch's Pen Menu "Hamburger" Icon Animations.

Forked from Jesse Couch's Pen Menu "Hamburger" Icon Animations.

A Pen by Niklas Jordan on CodePen.

License.

script.js

$(document).ready(function(){
  $('#button').click(function(){
		$('nav').toggleClass('open');
    $('#nav-icon').toggleClass('open');
	});
});

scripts

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

style.css

* {
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

#wrap {
  width:615px;
  position:absolute;
  left:50%;
  top: 20px;
  margin-left:-257px;
  display:block;
}

nav {
  diplay:block;
  height:35px;
  width:75px;
  box-sizing: border-box;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
  overflow:hidden;
  font-family: "Georgia", serif;
}

nav.open {
  width:615px;
  height:400px;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
  background:#00B4FF;
  border-radius:3px;
}

#button {
  cursor: pointer;
  height:35px;
  width:75px;
  position:absolute;
  margin-left:440px;
  box-sizing: border-box;
  padding:10px 8px;
  background:#00B4FF;
  border-radius:3px;
}

#menu {
  float:right;
  font-style:italic;
  font-size:13px;
  color:#fff;
}

#nav-icon {
  display:block;
  float:right;
  margin-left:8px;
  margin-top:1px;
  width: 15px;
  height: 10px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 5px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 10px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 0px;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 10px;
  left: 0px;
}

#navigation {
  width:100%;
  height:auto;
  position:relative;
  margin-top:60px;
}

#navigation ul {
  width:100%;
}

#navigation ul li {
  width:100%;
  list-style-type:none;
  text-align:center;
  height:60px;
  font-size:36px;
  
}

#navigation ul li a {
  color:#fff;
  text-decoration:none;
  font-style:italic;
}

#navigation ul li a:hover {
  color:#161616;
  -webkit-transition: .05s ease-in-out;
  -moz-transition: .05s ease-in-out;
  -o-transition: .05s ease-in-out;
  transition: .05s ease-in-out;
}