Membuat Fixed Tiny Nav

Membuat Fixed Tiny Nav - Halo sobat blogger, pada sore ini saya akan berbagi tips blogger yang keren dan simple.
Tutorial ini saya dapat dari blog tetangga yaitu Twisted Shape

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

1. Pertama sobat masuk ke Blogger > Template > Edit HTML

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

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

4. Lalu Masukan JQUERY dibawah ini tepat diatas </body>

<script>
(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>

Demo
click to view

Demikian toturial mengenai Fixed Tiny Nav Semoga bermanfaat.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post