Membuat off canvas menu dan tombol hamburger beranimasi di Oxygen Builder

Tutorial membuat canvas menu dan tombol hamburger beranimasi di Oxygen Builder
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Artikel Terkait
iBee-Music-Mockup

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!

Membutuhkan jasa untuk mengkonversi website anda menjadi WordPress & Oxygen Builder?
Estimasi Biaya

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.

Artikel Terkait

restore from backup WordPress with WP CLI and SSH
Restore Backup WordPress dengan WP CLI & SSH
Cara me-restore (mengembalikan) data WordPress kita dengan WP CLI & SSH.
Backup Cepat WordPress dengan WP CLI & SSH
Backup WordPress Cepat dengan WP CLI & SSH
Cara backup WordPress secara cepat dengan 1 perintah WP CLI dan 1 perintah SSH, serta membuat script backup dan script autobackup.
Foto-bersama-setelah-pelatiham-implementasi-e-commerce
Pelatihan Implementasi e-Commerce di Fakultas Pertanian Universitas Yudharta
Artikel ini bercerita tentang partisipasi kami dalam program implementasi e-Commerce yang diadakan Prodi Ilmu dan Teknologi Pangan, Fakultas Pertanian, Universitas Yudharta Pasuruan.
PAKET LENGKAP PEMBUATAN WEBSITE
Digitalizer menawarkan jasa pembuatan website untuk company profile, toko online, event organizer, lembaga pendidikan ataupun bidang lainnya. Anda tidak perlu memikirkan tentang domain, webhosting/server, DNS, email, desain, development, security serta masalah teknis lainnya. Cukup siapkan content website anda saja, sisanya kami yang mengerjakannya.
Semua paket pembuatan website sudah termasuk maintenance 1 tahun!
HOT LINK!
Kembali ke atas
cross