Membuat Fixed Tiny Nav di Blogspot ~  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
click to view


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 atau


/* 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 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 dibawah ini tepat diatas
<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...

0 komentar:

Posting Komentar

 
Top