Cara Membuat Menu Off Canvas pada Tampilan Web untuk Ponsel

Halo Sobat BTM! Jika kamu sedang mengembangkan sebuah website yang ditargetkan untuk pengguna ponsel, pasti kamu ingin membuat tampilan yang user-friendly dan mudah digunakan. Salah satu cara untuk mencapai hal tersebut adalah dengan membuat menu off canvas pada tampilan web.

Apa itu Menu Off Canvas?

Menu off canvas adalah sebuah tampilan menu yang disimpan di luar layar utama, dan hanya akan muncul saat pengguna melakukan tap atau swipe pada layar. Menu off canvas ini biasanya digunakan pada tampilan web yang ditargetkan untuk pengguna ponsel, dimana ruang layar terbatas dan menu tradisional tidak praktis digunakan.

Keuntungan dari Menu Off Canvas

Menu off canvas memiliki beberapa keuntungan dibandingkan dengan menu tradisional, antara lain:

Keuntungan Penjelasan
Lebih User-Friendly Karena menu off canvas hanya muncul saat diperlukan, maka tampilan website menjadi lebih bersih dan tidak terlalu banyak informasi yang ditampilkan secara bersamaan.
Hemat Ruang Dengan menggunakan menu off canvas, kita bisa menghemat ruang dan membuat tampilan website lebih ringkas dan tidak terlalu padat.
Fleksibel Kita bisa menyesuaikan tampilan menu off canvas dengan kebutuhan serta selera kita.

Cara Membuat Menu Off Canvas

Persiapan

Sebelum membuat menu off canvas, terdapat beberapa software yang harus diinstal, yaitu:

  • Visual Studio Code (untuk mengedit kode)
  • Browser Google Chrome (untuk melihat hasil dari website yang dibuat)

Selain itu, kita juga perlu membuat sebuah file HTML, CSS, dan JavaScript. Berikut adalah contoh kode dasar yang dapat digunakan:

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Website Saya</title><link rel="stylesheet" href="style.css"></head><body><nav><ul><li><a href="#">Menu 1</a></li><li><a href="#">Menu 2</a></li><li><a href="#">Menu 3</a></li></ul></nav><script src="script.js"></script></body></html>

Kode di atas merupakan kode dasar dari sebuah file HTML. Selanjutnya, kita perlu membuat file CSS dan JavaScript terpisah yang akan digunakan untuk membuat tampilan dan mengatur interaksi pada menu off canvas.

Membuat File CSS

File CSS digunakan untuk mengatur tampilan dari menu off canvas. Berikut adalah contoh kode CSS sederhana yang dapat digunakan:

nav {position: fixed;top: 0;left: -30%;width: 30%;height: 100%;background-color: #333;overflow-y: auto;transition: all 0.3s ease-in-out;}nav ul {list-style: none;margin: 0;padding: 0;}nav ul li {padding: 10px;border-bottom: 1px solid rgba(255,255,255,0.2);}nav ul li:hover {background-color: rgba(255,255,255,0.2);}.menu-toggle {position: relative;float: right;margin-right: 10px;width: 20px;height: 20px;cursor: pointer;}.menu-toggle span {display: block;position: absolute;height: 3px;width: 100%;background-color: #fff;border-radius: 3px;opacity: 1;left: 0;transform: rotate(0deg);transition: all 0.3s ease-in-out;}.menu-toggle span:nth-child(1) {top: 0;}.menu-toggle span:nth-child(2),.menu-toggle span:nth-child(3) {top: 10px;}.menu-toggle span:nth-child(4) {bottom: 0;}.menu-toggle.active span:nth-child(1),.menu-toggle.active span:nth-child(4) {top: 10px;width: 0%;left: 50%;}.menu-toggle.active span:nth-child(2) {transform: rotate(45deg);}.menu-toggle.active span:nth-child(3) {transform: rotate(-45deg);}.menu-toggle.active + nav {left: 0;}

Kode di atas mengatur tampilan dari menu off canvas, antara lain:

  • Posisi menu di sebelah kiri layar dengan lebar 30%
  • Warna background menu adalah #333
  • Daftar menu menggunakan warna putih dan memiliki border-bottom
  • Terjadi transisi saat menu muncul atau disembunyikan
  • Ada tombol toggle untuk membuka atau menutup menu off canvas

Membuat File JavaScript

File JavaScript digunakan untuk mengatur interaksi pada menu off canvas. Berikut adalah contoh kode sederhana yang dapat digunakan:

const nav = document.querySelector('nav');const menuToggle = document.querySelector('.menu-toggle');menuToggle.addEventListener('click', function() {menuToggle.classList.toggle('active');nav.classList.toggle('active');});

Kode di atas membuat sebuah event listener pada tombol toggle, dimana saat tombol tersebut ditekan maka akan terjadi pengubahan status dari menu dan tombol tersebut.

Kesimpulan

Menu off canvas adalah sebuah tampilan menu yang praktis dan user-friendly pada tampilan web untuk pengguna ponsel. Dengan membuat menu off canvas, tampilan website kita akan menjadi lebih bersih dan ringkas. Untuk membuat menu off canvas, kita dapat menggunakan HTML, CSS, dan JavaScript dengan mengikuti panduan yang telah dijelaskan di atas.

FAQ

1. Apakah menu off canvas hanya digunakan pada tampilan web untuk ponsel?

Menu off canvas dapat digunakan pada tampilan web untuk desktop atau tablet, namun lebih umum digunakan pada tampilan web untuk ponsel.

2. Bagaimana cara menyesuaikan tampilan menu off canvas dengan desain website saya?

Anda dapat mengubah warna, ukuran, atau posisi dari menu off canvas sesuai dengan desain website yang Anda inginkan pada file CSS.

3. Apakah ada plugin atau library yang dapat digunakan untuk membuat menu off canvas?

Ya, terdapat beberapa plugin atau library yang dapat digunakan untuk membuat menu off canvas. Beberapa contohnya adalah Bootstrap, Foundation, atau jQuery.

Semoga Bermanfaat dan Sampai Jumpa di Artikel Menarik Lainnya

Cara Membuat Menu Off Canvas pada Tampilan Web untuk Ponsel