Posted by Aak
Aak-share.com Updated at: 8:49:00 AM

Cara Membuat Menu Navigation Style Show Hide

No comments:
Cara Membuat Show Hide Navigation - Bisa kita temukan berbagai style Navigasi pada Blog seperti Navigasi Animasi HamburgerNavigasi Bouncing dengan berbagai fitur dan tampilan yang menarik .

Pada Navigasi satu ini memiliki tampilan yang sederhana namun didalam kesederhanaan tersimpan sebuah keunikan dan keindahan. Hal tersebut ada pada Show Hide Navigasi ketika link kita klik maka link tersebut akan berjalan dan sembunyi (hide) atau hilang, dan kita klik pada tombol menu link akan muncul (show) kembali .



Anda tertarik ingin memasangnya pada Blog Anda, langsung saja berikut ini langkah-langkahnya :

Yang perlu Anda lakukan membuka Editor Template dan cari kode ]]></b:skin> , kemudian anda salin kode CSS dibawah ini dan pasangkan diatasnya atau sebelumnya .

/*Show Hide Navigation*/
.nav {
  height: 18px;
  margin-top: 50px;
}
.nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav__trigger {
  position: absolute;
  top: 45px;
  left: 100%;
  background-color: #e7e0d9;
  border: 1px solid #876543;
  padding: 6px 10px;
  font-family: 'Lato', sans-serif;
  color: #876543;
  cursor: pointer;
  -webkit-transition: 300ms left ease-in;
          transition: 300ms left ease-in;
}
.nav__trigger.nav__trigger--active {
  left: calc(100% - 100px);
  -webkit-transition: 300ms left 1000ms ease-in;
          transition: 300ms left 1000ms ease-in;
}

.nav__list {
  position: relative;
}
.nav__list:after {
  content: "";
  display: table;
  clear: both;
}

.nav__item {
  position: absolute;
  width: 25%;
  display: inline-block;
  float: left;
  text-align: center;
  opacity: 1;
}
.nav__item:first-of-type {
  left: 0;
  -webkit-transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
          transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  -webkit-transition-delay: 0;
          transition-delay: 0;
}
.nav__item:nth-of-type(2) {
  left: 25%;
  -webkit-transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
          transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
}
.nav__item:nth-of-type(3) {
  left: 50%;
  -webkit-transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
          transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  -webkit-transition-delay: 400ms;
          transition-delay: 400ms;
}
.nav__item:last-of-type {
  left: 75%;
  -webkit-transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
          transition: opacity 650ms cubic-bezier(0.755, 0.05, 0.855, 0.06), left 750ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  -webkit-transition-delay: 600ms;
          transition-delay: 600ms;
}
.nav__item.nav__item--animate {
  left: 100%;
  opacity: 0;
}

.nav__link {
  padding: 10px 0;
  font-family: 'Lato', sans-serif;
  color: #876543;
}

.desc {
  margin-top: 50px;
}
.desc p {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 20px;
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
  color: #999;
}

Selanjutnya Anda cari kode </body> salin kode dibawah ini :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>

Catatan : Apabila di Template Anda sudah terinstall kode diatas makan Anda lewati langkah tersebut.

Masih pada kode </body> , Silahkan Anda salin kode Jvascript di bawah ini salin diatasnya atau dibawah kode diatas.

<script type="text/javascript">
$('.js-nav__link').click(function (e) {
    e.preventDefault();
    var goTo = this.getAttribute('href');
    $('.nav__item').addClass('nav__item--animate');
    $('.nav__trigger').addClass('nav__trigger--active');
    window.setTimeout(function () {
        window.location = goTo;
    }, 1000);
});
$('.nav__trigger').click(function () {
    $('.nav__item').removeClass('nav__item--animate');
    $(this).removeClass('nav__trigger--active');
});
</script>

Pada pemasangan HTML, Anda cari kode <div id='main-wrapper'> dan copy kode dibawah ini dan pasangkan dibawahnya atau sesudahnya .

<nav class="nav">
  <span class="nav__trigger">MENU</span>
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#1" class="nav__link js-nav__link">Item One</a>
    </li>
    <li class="nav__item">
      <a href="#2" class="nav__link js-nav__link">Item Two</a>
    </li>
    <li class="nav__item">
      <a href="#3" class="nav__link js-nav__link">Item Three</a>
    </li>
    <li class="nav__item">
      <a href="#4" class="nav__link js-nav__link">Item Four</a>
    </li>
  </ul>
</nav>
<div class="desc">
</div>

Simpan Template

Semoga bermanfaat!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments