Posted by Aak
Aak-share.com Updated at: 9:28:00 PM

Membuat Menu Navigasi Animasi Hamburger

1 comment:
Membuat Navigasi Hamburger - Hallo Sobat... berjumpa kembali dengan Aak. Sobat tentunya sudah mengetahui fungsi dari navigasi atau menu pada Blog . Yapps betul sekali, yaitu untuk memudahkan pengunjung untuk menavigasi halaman Blog sobat.

Banyak sekali style atau gaya pada Navigasi yang bisa kita temukan di Internet seperti Navigasi Circle Fill EffectNavigasi Underline Stroke Effect , atau Navigasi Shift Hover Effect . Pada Navigasi berikut ini mirip sebuah makanan berasal dari Benua Amerika yang terdiri dari roti bulat agak pipih dan dibelah dua , ditengahnya disisipkan lempengan daging yaitu Hamburger (atau seringkali disebut dengan burger) .



Karena Navigasi ini berbentuk seperti Hamburger maka saya beri judul Navigasi Hamburger : D
Fitur pada tombol Navigasi ini memiliki effect yang menari jika tombol di klik maka menu akan mencul di bawahnya. Bagi Anda yang tertarik berikut ini langkah-langkahnya :

Pertama-tama Anda cari kode ]]></b:skin> , kemudian copy kode CSS dibawah ini dan pastekan diatasnya.

.hamburger-btn {
  background-color: #fc5638;
  box-shadow: 0 4px 0 0 #fb3815, inset 0 4px 0 0 #fd745b, 0 2px 8px 4px #141414;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  cursor: pointer;
  position: absolute;
  top: 50px;
  left: 500px;
  z-index: 5;
  transition: all .4s ease;
}
.hamburger-btn:hover {
  background-color: #fc5f42;
  box-shadow: 0 4px 0 0 #fc4524, inset 0 4px 0 0 #fd8974, 0 2px 8px 4px #141414;
}
.hamburger-btn:active {
  background-color: #fc4524;
  box-shadow: inset 0 4px 0 0 #CF280A, 0 4px 0 0 #fc6347, 0 2px 8px 4px #141414;
}

.one, .two, .three {
  width: 65px;
  height: 8px;
  border-radius: 50px;
  display: inline-block;
  background-color: whitesmoke;
  position: absolute;
  left: 17px;
  top: 33px;
  transition: opacity .2s ease;
}

.two {
  top: 48px;
  -webkit-transform-origin: center center;
  transition: all .3s ease;
}

.three {
  top: 63px;
}

.hidden {
  opacity: 0;
}

.close {
  background-color: #fc4524;
  box-shadow: inset 0 4px 0 0 #CF280A, 0 4px 0 0 #fc6347, 0 2px 8px 4px #141414;
  z-index: 5;
}
.close:hover {
  background-color: #fc3c1a;
  box-shadow: inset 0 4px 0 0 #c5260a, 0 4px 0 0 #fc5f42, 0 2px 8px 4px #141414;
}

.buttons {
  margin-top: 40px;
  margin-right: -20px;
  z-index: 1;
}
.buttons .button1 {
  background-color: #5BC385;
  box-shadow: 0 4px 0 0 #43b772, inset 0 4px 0 0 #75cd98, 0 2px 8px 4px #141414;
  height: 0;
  width: 0;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.55s cubic-bezier(0, 1.2, 0.8, 1.2);
  display: inline-block;
  position: absolute;
  top: 4px;
  left: 19px;
  z-index: 1;
}
.buttons .button1:hover {
  background-color: #62c68b;
  box-shadow: 0 4px 0 0 #4cbe7a, inset 0 4px 0 0 #88d3a6, 0 2px 8px 4px #141414;
}
.buttons .button1:active {
  background-color: #4cbe7a;
  box-shadow: inset 0 4px 0 0 #3ca566, 0 4px 0 0 #66c78d, 0 2px 8px 4px #141414;
}
.buttons .button2 {
  background-color: #7E5DC2;
  box-shadow: 0 4px 0 0 #6a45b7, inset 0 4px 0 0 #9377cc, 0 2px 8px 4px #141414;
  height: 0;
  width: 0;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.55s cubic-bezier(0, 1.2, 0.8, 1.2);
  display: inline-block;
  position: absolute;
  top: 4px;
  left: 19px;
  z-index: 1;
}
.buttons .button2:hover {
  background-color: #8464c5;
  box-shadow: 0 4px 0 0 #724ebc, inset 0 4px 0 0 #a189d3, 0 2px 8px 4px #141414;
}
.buttons .button2:active {
  background-color: #724ebc;
  box-shadow: inset 0 4px 0 0 #5f3ea4, 0 4px 0 0 #8768c6, 0 2px 8px 4px #141414;
}
.buttons .button3 {
  background-color: #4084C7;
  box-shadow: 0 4px 0 0 #3472b0, inset 0 4px 0 0 #5c96cf, 0 2px 8px 4px #141414;
  height: 0;
  width: 0;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.55s cubic-bezier(0, 1.2, 0.8, 1.2);
  display: inline-block;
  position: absolute;
  top: 4px;
  left: 19px;
  z-index: 1;
}
.buttons .button3:hover {
  background-color: #4889c9;
  box-shadow: 0 4px 0 0 #377abc, inset 0 4px 0 0 #6fa2d5, 0 2px 8px 4px #141414;
}
.buttons .button3:active {
  background-color: #377abc;
  box-shadow: inset 0 4px 0 0 #2e659c, 0 4px 0 0 #4c8cca, 0 2px 8px 4px #141414;
}
.buttons .button4 {
  background-color: #C7408D;
  box-shadow: 0 4px 0 0 #b0347a, inset 0 4px 0 0 #cf5c9d, 0 2px 8px 4px #141414;
  height: 0;
  width: 0;
  border-radius: 100%;
  cursor: pointer;
  transition: all 0.55s cubic-bezier(0, 1.2, 0.8, 1.2);
  display: inline-block;
  position: absolute;
  top: 4px;
  left: 19px;
  z-index: 1;
}
.buttons .button4:hover {
  background-color: #c94892;
  box-shadow: 0 4px 0 0 #bc3783, inset 0 4px 0 0 #d56fa9, 0 2px 8px 4px #141414;
}
.buttons .button4:active {
  background-color: #bc3783;
  box-shadow: inset 0 4px 0 0 #9c2e6d, 0 4px 0 0 #ca4c94, 0 2px 8px 4px #141414;
}
.buttons i {
  color: whitesmoke;
  font-size: 0;
  -webkit-transform-origin: center center;
  transition: all .25s ease-in;
}


Selanjutnya Anda cari kode </body> kemudian copy kode dibawah ini dan pastekan diatasnya.

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

Catatan : Jika pada Template sobat sudah terinstall kode diatas, maka lewati langkah tersebut

Masih pada kode </body> Anda copy kode Javascript dibawah ini dan pastekan dibawah kode diatas.

<script type="text/javascript">
$(&#39;.hamburger-btn&#39;).click(function () {
    if ($(this).hasClass(&#39;close&#39;)) {
        $(&#39;.one&#39;).removeClass(&#39;hidden&#39;);
        $(&#39;.three&#39;).removeClass(&#39;hidden&#39;);
        $(&#39;.x1&#39;).css(&#39;transform&#39;, &#39;rotate(0deg)&#39;);
        $(&#39;.x2&#39;).css(&#39;transform&#39;, &#39;rotate(0deg)&#39;);
        $(this).removeClass(&#39;close&#39;);
        $(&#39;.button1&#39;).css({
            &#39;top&#39;: &#39;4px&#39;,
            &#39;left&#39;: &#39;19px&#39;,
            &#39;height&#39;: &#39;0&#39;,
            &#39;width&#39;: &#39;0&#39;,
            &#39;transition&#39;: &#39;all .3s ease-in&#39;
        });
        $(&#39;.button1 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;0&#39;);
        setTimeout(function () {
            $(&#39;.button2&#39;).css({
                &#39;top&#39;: &#39;4px&#39;,
                &#39;left&#39;: &#39;19px&#39;,
                &#39;height&#39;: &#39;0&#39;,
                &#39;width&#39;: &#39;0&#39;,
                &#39;transition&#39;: &#39;all .3s ease-in&#39;
            });
            $(&#39;.button2 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;0&#39;);
        }, 200);
        setTimeout(function () {
            $(&#39;.button3&#39;).css({
                &#39;top&#39;: &#39;4px&#39;,
                &#39;left&#39;: &#39;19px&#39;,
                &#39;height&#39;: &#39;0&#39;,
                &#39;width&#39;: &#39;0&#39;,
                &#39;transition&#39;: &#39;all .3s ease-in&#39;
            });
            $(&#39;.button3 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;0&#39;);
        }, 400);
        setTimeout(function () {
            $(&#39;.button4&#39;).css({
                &#39;top&#39;: &#39;4px&#39;,
                &#39;left&#39;: &#39;19px&#39;,
                &#39;height&#39;: &#39;0&#39;,
                &#39;width&#39;: &#39;0&#39;,
                &#39;transition&#39;: &#39;all .3s ease-in&#39;
            });
            $(&#39;.button4 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;0&#39;);
        }, 500);
    } else {
        $(&#39;.one&#39;).addClass(&#39;hidden&#39;);
        $(&#39;.three&#39;).addClass(&#39;hidden&#39;);
        $(&#39;.x1&#39;).css(&#39;transform&#39;, &#39;rotate(45deg)&#39;);
        $(&#39;.x2&#39;).css(&#39;transform&#39;, &#39;rotate(-45deg)&#39;);
        $(this).addClass(&#39;close&#39;);
        $(&#39;.button1&#39;).css({
            &#39;top&#39;: &#39;180px&#39;,
            &#39;left&#39;: &#39;300px&#39;,
            &#39;height&#39;: &#39;80px&#39;,
            &#39;width&#39;: &#39;80px&#39;,
            &#39;transition&#39;: &#39;all 0.55s cubic-bezier(0, 1.2, .8, 1.2)&#39;
        });
        $(&#39;.button1 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;50px&#39;);
        setTimeout(function () {
            $(&#39;.button2&#39;).css({
                &#39;top&#39;: &#39;180px&#39;,
                &#39;left&#39;: &#39;440px&#39;,
                &#39;height&#39;: &#39;80px&#39;,
                &#39;width&#39;: &#39;80px&#39;,
                &#39;transition&#39;: &#39;all 0.55s cubic-bezier(0, 1.2, .8, 1.2)&#39;
            });
            $(&#39;.button2 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;50px&#39;);
        }, 300);
        setTimeout(function () {
            $(&#39;.button3&#39;).css({
                &#39;top&#39;: &#39;180px&#39;,
                &#39;left&#39;: &#39;570px&#39;,
                &#39;height&#39;: &#39;80px&#39;,
                &#39;width&#39;: &#39;80px&#39;,
                &#39;transition&#39;: &#39;all 0.55s cubic-bezier(0, 1.2, .8, 1.2)&#39;
            });
            $(&#39;.button3 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;50px&#39;);
        }, 600);
        setTimeout(function () {
            $(&#39;.button4&#39;).css({
                &#39;top&#39;: &#39;180px&#39;,
                &#39;left&#39;: &#39;700px&#39;,
                &#39;height&#39;: &#39;80px&#39;,
                &#39;width&#39;: &#39;80px&#39;,
                &#39;transition&#39;: &#39;all 0.55s cubic-bezier(0, 1.2, .8, 1.2)&#39;
            });
            $(&#39;.button4 .fa-bolt&#39;).css(&#39;font-size&#39;, &#39;50px&#39;);
        }, 900);
    }
});
//@ sourceURL=pen.js
</script>

Pada pemasangan kode HTML dibawah ini Anda cari kode <div id='main-wrapper'> , kemudian terapkan dibawahnya.

<div class="container">
<div class="hamburger-btn">
<span class="line one"></span>
<span class="line two x1" style="-webkit-transform: rotate(0deg);"></span>
<span class="line two x2" style="-webkit-transform: rotate(0deg);"></span>
<span class="line three"></span>
</div>
<div class="buttons">
<div class="button1" style="-webkit-transition: all 0.3s ease-in; height: 0px; left: 19px; top: 4px; transition: all 0.3s ease-in; width: 0px;">
<i class="fa fa-bolt" style="font-size: 0px;"></i></div>
<div class="button2" style="-webkit-transition: all 0.3s ease-in; height: 0px; left: 19px; top: 4px; transition: all 0.3s ease-in; width: 0px;">
<i class="fa fa-bolt" style="font-size: 0px;"></i></div>
<div class="button3" style="-webkit-transition: all 0.3s ease-in; height: 0px; left: 19px; top: 4px; transition: all 0.3s ease-in; width: 0px;">
<i class="fa fa-bolt" style="font-size: 0px;"></i></div>
<div class="button4" style="-webkit-transition: all 0.3s ease-in; height: 0px; left: 19px; top: 4px; transition: all 0.3s ease-in; width: 0px;">
<i class="fa fa-bolt" style="font-size: 0px;"></i></div>
</div>
</div>

Semoga bermanfaat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

Kok ngga bisa tampil knp ya um?

Balas