Membuat off canvas menu dan tombol hamburger beranimasi di Oxygen Builder

Hi Sobat Digital! Kali ini saya akan membagikan tutorial cara membuat canvas menu yang akan diaktifkan dan di non aktifkan dengan tombol hamburger yang beranimasi.

Pada artikel yang lain sebelumnya kami pernah membuat artikel tentang "Cara Membuat Menu Di Luar Kanvas dengan Oxygen Builder". Perbedaannya pada tutorial kali ini adalah pada artikel tersebut canvas menu dibuat dengan elemen Modal dan tombol hamburger-nya tidak beranimasi, sedangkan pada tutorial ini kami menggunakan CSS dan javascript dengan animasi pada tombol hamburgernya.

Tombol hamburger yang kami maksud adalah icon garis tiga biasanya bermakna sebagai icon pemicu untuk membuka menu.

Membuat tombol hamburger beranimasi

Untuk membuat tombol hamburger beranimasi ada 2 cara yang umum. Yang pertama adalah kita membuat garis-garis secaa manual dan yang kedua menggunakan css library.

Untuk tutorial kali ini kita akan menggunakan CSS library animated hamburgers dari Jonathan Suh.

Silahkan anda buka halaman "Tasty CSS-animated hamburger" di https://jonsuh.com/hamburgers/ dan pilih salah satu animasi yang anda inginkan, misalkan dalam contoh tutorial ini saya akan memilih Elastic.

Tambahkan elemen code block di Oxygen Builder, letakkan pada tempat dimana anda ingin meletakkan tombol hamburger tersebut, biasanya pada header.

Tambahkan code berikut ini pada tab HTML di elemen code block tersebut:

<button class="hamburger hamburger--elastic" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

Perhatikan baris pertama, jika anda ingin mengganti tipe animasi Elastic dengan animasi yang lainnya, silahkan ganti bagian hamburger--elastic menjadi tipe animasi yang anda inginkan, misalkan hamburger--arrow, hamburger--spin dan lain sebagainya. Lihat jenis-jenis animasi yang disediakan pada halaman "Tasty CSS-animated hamburger".

Hamburger akan beranimasi menjadi bentuk yang lain jika memiliki css class is-active. Untuk memicunya, kita menggunakan jQuery yang ditambahkan pada code block tab javascript seperti ini:

var $hamburger = jQuery(".hamburger");
	$hamburger.on("click", function(e) {
		$hamburger.toggleClass("is-active");
		jQuery ('body').toggleClass('menu-muncul');
	});

Kode javascript diatas akan menambahkan dan menghilangkan css class is-active (seperti menjadi toggle on/off) pada elemen yang memiliki class hamburger yang berfungsi untuk menganimasikan tombol hamburger, dan akan menambahkan CSS class "menu-muncul" pada body untuk memunculkan canvas menu (akan dibahas dibawah).

Untuk CSS nya kita akan mengambil bagian dasar CSS hamburger dan bagian animasi elastic saja agar dapat menghemat dan menjaga performance web kita.

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; }

Untuk animasi lainnya silahkan buka CSS lengkapnya disini.

Sampai tahap ini kita sudah bisa membuat icon hamburger yang ketika di klik akan beranimasi menjadi bentuk silang, dan ketika di klik kembali akan beranimasi menjadi bentuknya semula.

Membuat Menu Kanvas

Menu kanvas yang akan kita buat menggunakan DIV dan CSS class canvas-menu.

Kondisi awalnya DIV tersebut akan di sembunyikan di luar layar (karena itu dinamakan Off Canvas), dan akan bergeser masuk ke layar oleh kondisi CSS class "menu-muncul" ketika tombol hamburger di tekan karena dipicu oleh kode javascript yang sebelumnya telah kita buat diatas.

Caranya buatlah DIV dan berikan class canvas-menu. Isilah dengan elemen-elemen yang anda butuhkan, seperti link menu, logo, tombol dlsbnya didalam DIV tersebut.

Kemudian buatlah kode CSS dan javascript seperti berikut ini:

/*canvasmenu*/
.canvas-menu {
	background:white;
	position:fixed;
	left:0;
	top:0;
	width:300px;
	height:100vh;
	transform:translateX(-100%);
	z-index:99;
	opacity:0;
	overflow-y: hidden;
}

.menu-muncul .canvas-menu {
	transform:translateX(0);
	transition: .3s all cubic-bezier(0.65, 0, 0.35, 1);
	opacity:1;
	overflow-y: hidden;
}

Penutup

Contoh diatas adalah salah satu cara untuk membuat off-canvas menu dengan Oxygen Builder tanpa plugin tambahan lainnya.

Dengan menggunakan kode langsung seperti ini kita dapat meminimalisir penggunaan kode-kode yang tidak perlu (bloat) sehingga dapat memaksimalkan performa website kita.

Anda juga bisa mengkombinasi dan memodifikasi sesuai kebutuhan dan kreatitiftas anda, dan saya yakin pasti hasilnya akan lebih menarik bagi visitor anda.

Demikianlah salah satu cara untuk membuat off canvas menu dengan tombol hamburger beranimasi.

Apakah anda memiliki alternatif cara lainnya? Maukah anda membagikannya dengan yang lain? Atau anda mengalami kesulitan saat menerapkan kode diatas?

Silahkan tinggalkan komentar anda dibawah untuk saling berbagi dengan yang lainnya.

Salam Digital!