Side Navigation With Animation

Side Navigation With Animation - Disini Saya akan berbagi konsep navigasi menu vertikal dengan animasi yang cukup menarik untuk diterapkan di blog Anda.

Minimal Anda sudah mengenal dengan kode yang akan Saya bagikan ini, jadi Saya tidak perlu menjelaskan tentang cara peletakannya. Ok silahkan dicoba dan sesuaikan kembali dengan blognya.

1. Fixed Overlay Menu

<div class="navToggle"><span class="menu"></span></div>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Playground</a></li>      
  </ul>
</nav>

.navToggle {
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 10;
    text-align: center;
}

.navToggle:hover {
    cursor: pointer;
}

.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
    background: white;
}

.navToggle:hover .menuOn {
    background: transparent;
}

.menu, .menu:before, .menu:after {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 5px;
    background: #fff;
    transition: 0.3s;
}

.menu:before, .menu:after {
    content: "";
    position: absolute;
    left: 0;
}

.menu:before {
    top: 10px;
}

.menu:after {
    bottom: 10px;
}

.menuOn {
    background: transparent;
}

.menuOn:before {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
}

.menuOn:after {
    bottom: 0;
    transform: rotate3d(0, 0, 1, -45deg);
}

nav {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    padding: 50px 125px 50px 50px;
    transition: all .2s ease-in-out;
    color: #fff;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    color: red;
}

nav.navOn {
    display: block;
    z-index: 5;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul li a {
    display: block;
    padding: 20px;
    font-weight: 100;
    font-size: 2rem;
    text-transform: lowercase;
}

nav ul li a:hover {
    color: #ff274d;
}

$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('nav').toggleClass('navOn');
})

Result

2. Off Canvas Slide Menu

<div class="bodyContainer">
  <main>
    <section>
      <div>
        <h1>Off Canvas Slide Menu</h1>
        <p>Consectetur adipiscing elit. Nunc a commodo tellus. Integer consectetur risus quis lacus volutpat, porta congue lorem hendrerit. Vivamus lobortis, lorem at euismod faucibus, nibh nisl aliquet lacus, ac ornare nulla nunc eget libero. Vivamus rhoncus ullamcorper libero, vel lacinia orci mollis sed.</p>
        <p>Nullam quis arcu et nibh malesuada dictum. Nam quis sapien rutrum, auctor diam ac, tempus odio. Proin a tellus vulputate, mollis elit et, bibendum elit. Phasellus tincidunt sit amet leo ac pharetra. Aliquam molestie odio massa, sit amet dignissim ipsum dictum in.</p>
           <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>  
    <p>Maecenas iaculis pellentesque ante, vel faucibus massa iaculis eget. Suspendisse potenti. Quisque auctor, turpis ut auctor tempus, diam ante pharetra dui, eleifend posuere tellus metus et lorem. Ut id ultricies metus, sed pharetra ipsum. Donec egestas, mi a sagittis rhoncus.</p>  
      </div>
    </section>
  </main>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Disclaimer</a></li>
      <li><a href="#">Playground</a></li>         
    </ul>
  </nav>
</div>
<!-- nav -->
<div class="navToggle"><span class="menu"></span></div>

.bodyContainer {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

main,
nav {
    position: absolute;
    width: 100%;
}

main {
    left: 0;
}

nav {
    left: 100%;
}

.mainMove {
    left: -30%;
}

.navMove {
    left: 70%;
}

.navToggle {
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 10;
    text-align: center;
}

.navToggle:hover {
    cursor: pointer;
}

.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
    background: #fff;
}

.navToggle:hover .menuOn {
    background: transparent;
}

.menu, .menu:before, .menu:after {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 5px;
    background: #fff;
    transition: 0.3s;
}

.menu:before, .menu:after {
    content: "";
    position: absolute;
    left: 0;
}

.menu:before {
    top: 10px;
}

.menu:after {
    bottom: 10px;
}

.menuOn {
    background: transparent;
}

.menuOn:before {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
}

.menuOn:after {
    bottom: 0;
    transform: rotate3d(0, 0, 1, -45deg);
}

main {
    padding: 50px;
    background: #30abd5;
    transition: all .2s ease-in-out;
}

nav {
    padding: 30px;
    transition: all .2s ease-in-out;
    color: #fff;
    background: #2f3b3f;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav ul li a {
    display: block;
    padding: 20px;
    font-weight: 100;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
}

nav ul li a:hover {
    color: #ff274d;
}

$(window).load(bodyContentHeight);
$(window).resize(function() {
 $('.bodyContainer, main, nav').css('height', '100%');
 bodyContentHeight();
});

function bodyContentHeight() {
 var newHeight = $(document).outerHeight() + 'px';
 $('.bodyContainer, main, nav').css('height', newHeight);
 // var docHeight = $(document).outerHeight();
 // console.log('.bodyContainer calculated on load: ' + newHeight + 'px');
}

$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('main').toggleClass('mainMove');
  $('nav').toggleClass('navMove');
})

Result

3. Fixed Side Menu

<aside class='sidebar'>
  <div class='main-nav'>
    <ul>
      <li class='logo'>
        <a>Menu</a>
        <span class='entypo-list'></span>
      </li>
      <li>
        <a>Home</a>
        <span class='entypo-home'></span>
      </li>
      <li>
        <a>Features</a>
        <span class='entypo-gauge'></span>
      </li>
      <li>
        <a>Analytics</a>
        <span class='entypo-chart-line'></span>
      </li>
      <li>
        <a>Premium</a>
        <span class='entypo-rocket'></span>
      </li>
      <li>
        <a>Account</a>
        <span class='entypo-vcard'></span>
      </li>
      <li>
        <a>Settings</a>
        <span class='entypo-cog'></span>
      </li>
    </ul>
  </div>
</aside>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
    font-family: 'entypo', sans-serif;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #252a32;
    color: #fff;
    overflow: hidden;
    transition: width .3s ease-in-out;
    z-index: 100;
}

.sidebar:hover {
    width: 200px;
}

.sidebar:hover .main-nav ul li a {
    opacity: 1;
    left: 0;
    transition-delay: .2s;
}

.sidebar .main-nav ul li {
    min-height: 50px;
    line-height: 50px;
    position: relative;
    border-bottom: 1px solid #303641;
    transition: all .3s ease-in-out;
}

.sidebar .main-nav ul li.logo a {
    text-transform: uppercase;
    font-weight: 800;
}

.sidebar .main-nav ul li.logo span:before {
    color: #ea4c89;
    font-size: 1.5em;
}

.sidebar .main-nav ul li.logo + li {
    border-top: 1px solid #303641;
}

.sidebar .main-nav ul li a {
    display: block;
    padding-left: 50px;
    position: relative;
    left: 15px;
    opacity: 0;
    transition: all .3s ease-in-out;
    transition-delay: 0s;
    cursor: pointer;
    font-weight: 300;
}

.sidebar .main-nav ul li span {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
    text-align: center;
}

.sidebar .main-nav ul li span:before {
    font-size: 1.25em;
    transition: all .3s ease-in-out;
}

.sidebar .main-nav ul li:hover {
    background-color: #1b1e24;
}

.sidebar .main-nav ul li:hover span:before {
    color: #ea4c89;
}