Saturday, December 27, 2014

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


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

Load disqus comments

25 comments

  1. 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

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

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

      Delete
  2. menunya keren.. apalagi template blog ini :-d

    ReplyDelete
  3. 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.

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

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

      Delete
  4. 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? @@,

    ReplyDelete
    Replies
    1. jika class menunya sama memang harus diganti, kl berbeda cukup menambahkan saja

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

      Delete
  6. This comment has been removed by the author.

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

    ReplyDelete
  8. 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

    ReplyDelete

Silakan tambahkan komentar sesuai dengan topik, terima kasih.