Membuat Awesome Menu Animasi Toggle

​

Mengkombinasikan panel toggle dengan font awesome untuk menu header blog, agar tampilan menjadi lebih simple dan menarik. Sebagai gambarannya bisa lihat DEMO

Konsep :

CSS

Code:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
.site-nav:before,
.site-nav:after {
  content: '';
  display: table;
}
.site-nav:after {
  clear: both;
}
.site-header, .header-toggle, .header-toggle-icon, .header-toggle-icon:before, .header-toggle-icon:after {
  transition: .3s all;
}
.site-boundary {
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 2em;
  position: relative;
}

*,
*:before
*:after {
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  margin: 0;
  padding: 0;
}
body {
  background:#36424a;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 100;
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
.site-header {
  background: #e06666;
  color: #fff;
  position: fixed;
  transform: translateY(-100%);
  width: 100%;
  z-index: 2;
}
.site-header.active {
  transform: translateY(0);
}
.site-nav {
  font-size: 1.25em;
  padding: 0 .5em;
}
.site-nav a {
  color: #fff;
  display: block;
  float: left;
  padding: 1em;
  text-decoration: none;
}

.site-nav a:hover {
  color: #555;
  display: block;
  float: left;
  padding: 1em;
  text-decoration: none;
}

.header-toggle {
  background: #e06666;
  border-radius: 3px;
  bottom: -5em;
  cursor: pointer;
  font-size: 12px;
  height: 4em;
  position: absolute;
  right: 1em;
  width: 4em;
}
.site-header.active .header-toggle {
  transform: rotate(90deg);
}
.site-header.active .header-toggle:hover .header-toggle-icon {
  animation: pulse-arrow .6s 1 forwards;
}
.header-toggle-icon {
  margin-top: -.125em;
  position: relative;
  top: 50%;
}
.site-header.active .header-toggle-icon {
  transform: scale(0.75);
}
.header-toggle-icon, .header-toggle-icon:before, .header-toggle-icon:after {
  background: #fff;
  content: '';
  height: .25em;
  left: 50%;
  margin-left: -1em;
  position: absolute;
  width: 2em;
}
.header-toggle-icon:before {
  top: -.5em;
}
.site-header.active .header-toggle-icon:before {
  transform: translateX(-0.3em) rotate(-45deg);
  width: 1.55em;
}
.header-toggle-icon:after {
  top: .5em;
}
.site-header.active .header-toggle-icon:after {
  transform: translateX(-0.3em) rotate(45deg);
  width: 1.55em;
}

@keyframes pulse-arrow {
  0% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.75);
  }
}

HTML

Code:

<header class="site-header">   
<div class="site-boundary">
<nav class="site-nav">
<a href="#"><i class="fa fa-envelope-o"></i> Contact Me</a>
<a href="#"><i class="fa fa-cogs"></i> Setting</a>
<a href="#"><i class="fa fa-download"></i> Download</a>
<a href="#"><i class="fa fa-comment-o"></i> Discus</a>
<a href="#"><i class="fa fa-male"></i> About Me</a>
</nav>
<div class="header-toggle">
<div class="header-toggle-icon"></div>
</div>
</div>
</header>

JS

Code:

$('.header-toggle').on('click', function() {
$('.site-header').toggleClass('active');
});

Agar menu bisa berjalan pastikan anda telah menginstall jQuery min.js berapapun versinya.