Side Navigation With Animation

12/27/2014

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');
})


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');
})


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;
}

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

23 comments

keren kak, :D
kaaak, minta template ini dong :D
keren dan simple banget, pengen nihhhhh..... :(
saya tau kakak baik dan dermawan mau bagi ini template :ng :lv

Balas

trims... tp banyak fitur yg dihapus di template ini, tujuannya biar ringan aj. ok nanti kl sempat saya bagikan disini

Balas

menunya keren.. apalagi template blog ini :-d

Balas

Very cool. Your design is awesome :)

Balas

Waaaaaaah, blognya bagus.
Eh, ngomong-ngomong kok dibagian atas komentar sama dengan blognya DuniaBlanter. Itu, iya yang ada Conversion ama Emoticon.
Atau author blog twistedshape ama duniablanter itu satu orang yang sama.

Balas

Eh maaf maksud saya bukan dunia blanter tapi blanter-forever.blogspot.com

Balas

silahkan dicoba om :)

Balas

conversion dan emoticon sudah ada tutornya di blog kompi ajaib. jadi wajar jika ada kesamaan. yang jelas bukan satu orang yang sama

Balas

Mbak Lin saya mau tanya. Kan Side Navigation With Animation itu di bagian samping, lah blog saya navigasinya di atas, mau saya pindah ke samping, itu langsung nambahin kode html Side Navigation With Animation atau harus hapus code html navigasi yang lama? @@,

Balas

jika class menunya sama memang harus diganti, kl berbeda cukup menambahkan saja

Balas

Nah, itulah yang saya cari "Ringan" tapi elegan :ng
makasih sebelumnya ya kak :-bd

Balas

thanks you so mutch arlina -_- :-bd

Balas

arlina please i whant a code off recent comment if you can send me computer007@dr.com

Balas

send me email salim.moustanir@gmail.com

Balas

Kodenya ditaro dimana?

Balas

Didalam template

Balas

mb cara nambahin submenunya gimana ya?

Balas
This comment has been removed by the author.

Mbak masih bingung nih. HTML di atas /head ? CSS di atas /b:skin ? soalnya udh di terapin begitu tetep ga bisa :"

Balas

mbak kok malah kayak gini? ,, padahal class nya udh saya ganti jadi .sidebar-kiri biar gk bentrok ama class css navigation bawaan ,,,sebelumnya saya cuma kasih display:none buat css navigation bawaan http://i28.photobucket.com/albums/c226/riski_ds/Capture_zpswixzke43.jpg

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.