Cara Menciptakan Hidangan Navigation Style Show Hide

Cara Membuat Show Hide Navigation - Bisa kita temukan banyak sekali style Navigasi pada Blog seperti Navigasi Animasi Hamburger , Navigasi Bouncing dengan banyak sekali fitur dan tampilan yang menarik .

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

Demo Code

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

Yang perlu Anda lakukan membuka Editor Template dan cari kode ]]></b:skin> , lalu anda salin aba-aba 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 aba-aba </body> salin aba-aba dibawah ini :

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

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

Masih pada aba-aba </body> , Silahkan Anda salin aba-aba Jvascript di bawah ini salin diatasnya atau dibawah aba-aba 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 aba-aba 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!

Sumber http://www.websiteedukasi.com/