Membuat Menu Navigasi Animasi Hamburger

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 Effect , Navigasi 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) .

Demo

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!

Bagikan Artikel ini