Membuat Fixed Tiny Nav untuk Blogger

Membuat Fixed Tiny Nav untuk Blogger

Rio Ilham Hadi

22 November 2014

Membuat Fixed Tiny Nav di Blog ~ Halo sobat Blanter, Kali ini saya akan memberikan Tutorial Cara membuat Fixed Tiny Nav ( Menu Navigasi Kecil Yang Mengikuti Scroll ) Menu ini Simple Kecil tapi keren, mungkin ada sobat blogger yang ingin blognya keren tapi Simple, yaa menu ini cocok di pasang di blog yang ingin Simple.

Menu ini saya dapat dari Blog Twisted Shape, Admin aslinya adalah Arlina Fitriyani dengan blognya yang keren yaitu Arlina Design.

Demo

Jika sobat ingin Memasang Menu Simple dan keren ini, silahkan ikuti tutorial di bawah ini.

Pertama sobat masuk ke Blogger > Template > Edit HTML

Masukan CSS dibawah ini tepat diatas ]]></b:skin> atau </style>

 /* CSS Simple Menu */
.unstyled-list {
    padding: 0;
}

.unstyled-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 140px;
    opacity: 0;
    backface-visibility: hidden;
    transform: translate3d(0,20px,0);
    visibility: hidden;
    box-shadow: 0 3px 8px -3px rgba(0,0,0,0.2);
    transition: all .2s ease, visibility 0s linear;
}

.nav {
    position: fixed;
    top: 5%;
    right: 2%;
    z-index: 102;
}

.nav.active .fa-bars {
    opacity: 0;
}

.nav.active .fa-times {
    opacity: 1;
    color: #fff;
    background: #f56954;
}

.nav.active .nav-menu {
    opacity: 1;
    transform: translate3d(0,50px,0);
    visibility: visible;
    transition-delay: 0s;
}

.menu-btn {
    display: block;
    width: 40px;
    height: 40px;
    color: #fff;
    background-color: rgba(0,0,0,0.2);
    transition: all .2s ease;
    text-align: center;
    position: relative;
    z-index: 1;
}

.menu-btn .fa {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    vertical-align: middle;
    transition: opacity .1s linear;
}

.menu-btn .fa-bars {
    opacity: 1;
    color: #fff;
}

.menu-btn .fa-times {
    opacity: 0;
}

.menu-btn:hover {
    background-color: #f56954;
    color: #fff;
}

.nav-item-link {
    display: block;
    font-size: 13px;
    color: #999;
    padding: 15px;
    background-color: #fff;
    transition: all .2s ease;
    border-bottom: 1px solid #e9e9e9;
}

.nav-item:last-child .nav-item-link {
    border-bottom: none;
}

.nav-item .nav-item-link i.fa.fa-home,.nav-item .nav-item-link i.fa.fa-paper-plane,.nav-item .nav-item-link i.fa.fa-list-alt,.nav-item .nav-item-link i.fa.fa-coffee {
    margin-right: 10px;
}

.nav-item-link:hover {
    background-color: #fcfcfc;
}

a.nav-item-link:hover {
    color: #1497ec;
}

.unstyled-list:before {
    bottom: 100%;
    right: 10%;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255,255,255,0);
    border-bottom-color: #f56954;
    border-width: 8px;
    margin-left: -8px;
}

.nav-item:first-child .nav-item-link {
    border-top: 3px solid #f56954;
}

a.nav-item-link {
text-decoration: none;
font-family: inherit;
} 

Lalu Masukan HTML dibawah ini di tempat yang sobat inginkan.

 <nav class='nav' data-menu>
  <a class='menu-btn' href='#'>
    <i class='fa fa-bars'></i>
    <i class='fa fa-times'></i>
  </a>
  <ul class='unstyled-list nav-menu'>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>About</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Articles</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Work</a>
    </li>
    <li class='nav-item'>
      <a class='nav-item-link' href='#'>Contact</a>
    </li>
  </ul>
</nav> 

Lalu Masukan JQUERY dibawah ini tepat diatas </body>

 <script type="text/javascript">
(function() {
  window.Menu = (function() {
    Menu.init = function() {
      return $('[data-menu]').each(function(idx, el) {
        return new Menu($(el));
      });
    };

    function Menu($el) {
      this.nav = $el;
      this.menubtn = $('.menu-btn', this.nav);
      this.menubtn.on('click', (function(_this) {
        return function(ev) {
          _this.nav.toggleClass('active');
          return false;
        };
      })(this));
    }

    return Menu;

  })();

  $(function() {
    if ($('[data-menu]').length) {
      return Menu.init();
    }
  });

}).call(this);
</script> 

Langkah Terakhir Simpan Template.

Semoga Tutorial Ini Bermanfaat...

Share This