Saturday, November 22, 2014

Fixed Tiny Nav for Blogger



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

Load disqus comments

28 comments

  1. Maaf mbak, udah dicoba tetep ngga bisa

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

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

    ReplyDelete
    Replies
    1. html-nya dibungkus dengan tag kondisional

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

      Delete
  3. Replies
    1. iya, tp kaskus lebih rumit kodenya. yg ini simple aja

      Delete
    2. maaf untuk kode htmlnya itu sebelum kode apa?

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

    ReplyDelete
  5. Mba Cara nempatin CSS yg bener dmna?

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

    ReplyDelete
  7. kok kalau di klik tidak keluar menu navigasinya mbak?

    ReplyDelete

Silakan tambahkan komentar sesuai dengan topik, terima kasih.