Fixed Tiny Nav for Blogger

11/22/2014


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

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

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

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

28 comments

Maaf mbak, udah dicoba tetep ngga bisa

Balas

oia, kode jquery-nya belum dibungkus..sdh fix skrg

Balas

Jquernya ditaruh mana mba? :D

Balas

Jadi mba makasih, tp cara membuatnya keluar cuma di page postingan gmna?

Balas

html-nya dibungkus dengan tag kondisional

Balas

bisa di atas </head> atau </body>

Balas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class='nav' data-menu=''>
...
...
...
</nav>
</b:if>

Balas

Masih muncul di halaman home gan

Balas

mirip di kaskus mbak tiny navnya :)

Balas

kl sdh dibungkus ga bkl muncul di home

Balas

iya, tp kaskus lebih rumit kodenya. yg ini simple aja

Balas

Cara Nempatin CSSnya yg bener dmna mba?

Balas

Mau pasang ini tapi kok gk bisa" mbak. ane pasang di templatenya evo magz.

Balas

mungkin penempatan jquery-nya

Balas

Mba Cara nempatin CSS yg bener dmna?

Balas

Mba, ini udah jadi tp kenapa yaa HTMlnya muncul di widgetnya juga

Balas

Terus diletakan di mana mba?

Balas

nama class css-nya ada yang sama mungkin

Balas

maaf untuk kode htmlnya itu sebelum kode apa?

Balas

kok kalau di klik tidak keluar menu navigasinya mbak?

Balas

Sudah mba tapi tetep aja gk bisa

Balas

nanti saya coba share yang lain

Balas

tempatkan script di atas </body>

Balas

Silakan tambahkan komentar sesuai dengan topik, terima kasih.