Cara Membuat Bilah Menu Seluler Dengan HTML, CSS, dan JavaScript

Tidak diragukan lagi, Anda dapat membuat menu seluler yang dapat diubah menggunakan kerangka kerja CSS seperti TailWind atau BootStrap.

Tapi apa konsep di baliknya? Dan bagaimana Anda bisa membuatnya dari awal tanpa bergantung pada kerangka kerja CSS ini?

Melakukan hal di atas sendiri memberi Anda kontrol penyesuaian penuh. Jadi, tanpa basa-basi lagi, berikut ini cara membuat menu seluler yang dapat diubah menggunakan bahasa pemrograman pilihan Anda.

Cara Membuat Menu Seluler yang Dapat Dialihkan

Jika Anda belum melakukannya, buka folder proyek Anda dan buat file proyek Anda (HTML, CSS, dan JavaScript).

Di bawah ini, Anda akan melihat contoh kode yang Anda butuhkan untuk ketiga jenis tersebut. Dan jika Anda belum melakukannya, pertimbangkan untuk mengunduh aplikasi ini untuk mempelajari kode sebelum membaca.

Kami akan mulai dengan HTML:

 Buat tiga div untuk mewakili bilah menu tarik-turun tiga baris 








 Tambahkan navigasi Anda di sini 


Rumah
Tentang
Kontak

CSS:

/*Demarkasi bagian ini semata-mata untuk tujuan tutorial*/

instagram viewer


bagian{ 
lebar: 800 piksel;
tinggi: 600 piksel;
margin-atas: 50px;
margin-kiri: 250px;
perbatasan: 1px hitam pekat;
latar belakang: #e6e3dc;
}
/*posisikan wadah divs di DOM Anda*/
#toggle-container{
tampilan: kisi;
lebar: fit-konten;
margin-kiri: 720px;
margin-atas: 10px;
}
/* Tumpuk tiga div di atas satu sama lain. Kemudian atur tinggi dan lebarnya.*/
#satu dua tiga{
latar belakang: hitam;
lebar: 30 piksel;
tinggi: 3 piksel;
margin-atas: 5px;
} 
.toggle-konten{
tampilan: tidak ada;
margin-kiri: 700px;
margin-atas: 20px;
}
.toggle-konten a{
tampilan: blok;
dekorasi teks: tidak ada;
warna hitam;
ukuran font: 30px;
}
.toggle-content a: arahkan kursor{
warna biru;
}
/*Menampilkan instance kelas yang dibuat oleh JavaScript di blok*/
.ditampilkan{
tampilan: blok;
}

Tambahkan JavaScript:

var toggler = document.getElementById("toggle-container");
var toggleContents = document.getElementById("konten-toggle");
document.addEventListener("klik", fungsi(){
//Terapkan instance kelas ke setiap navigasi dan atur tampilan untuk beralih:
toggleContents.classList.toggle("ditampilkan");
});

Begini tampilan output yang berfungsi saat Anda mengklik bilah menu:

Menu dapat dialihkan, jadi mengklik bilah lagi—atau di mana pun di dalam halaman—menyembunyikan navigasi.

Terkait: Gaya Elemen Situs Web Dengan Gradien Latar Belakang CSS

Peramban Anda mungkin tidak mendukung penyembunyian konten saat Anda mengeklik di mana pun dalam laman web Anda. Anda dapat mencoba memaksakan ini dengan menggunakan target acara dan loop JavaScript. Anda dapat melakukannya dengan menambahkan blok kode berikut ke JavaScript Anda:

//Tambahkan acara klik ke halaman web Anda:
window.onclick = fungsi (acara) {
//Targetkan acara klik pada bilah menu untuk memungkinkan badan halaman web melacaknya:
if (!event.target.matches('#toggle-container')) {
var dropdown = document.getElementsByClassName("konten-beralih");
//Sembunyikan navigasi dengan mengulang masing-masing navigasi:
untuk (var i = 0; i < dropdowns.length; saya++) {
var dijatuhkan = dropdown[i];
if (dropped.classList.contains('display')) {
drop.classList.remove('tampilan');
}
}
}
}

Jadi, inilah ringkasan dari apa yang baru saja Anda lakukan: Anda membuat tiga baris menggunakan div tanda HTML. Anda menyesuaikan tinggi dan lebarnya dan memposisikannya di DOM Anda. Kemudian Anda memberi ini acara klik menggunakan JavaScript.

Terkait: Cara Membuat Website: Untuk Pemula

Anda mengatur tampilan awal navigasi Anda ke tidak ada untuk menyembunyikannya saat halaman dimuat. Kemudian klik event pada tiga baris mengaktifkan navigasi ini berdasarkan kelas yang diinstansiasi JavaScript (ditampilkan). Terakhir, Anda menggunakan kelas baru ini untuk menampilkan navigasi menggunakan CSS, dan JavaScript toggleKonten metode.

Terkait: Tren Desain Neumorfik dalam HTML, CSS, dan JavaScript

Sisa CSS, bagaimanapun, tergantung pada preferensi Anda. Tapi yang ada di contoh cuplikan CSS di sini seharusnya memberi Anda gambaran tentang cara menata gaya Anda.

Menjadi Lebih Kreatif Saat Membangun Situs Web Anda

Membuat situs web yang menarik secara visual membutuhkan kreativitas. Dan situs web yang ramah pengguna lebih cenderung mengonversi audiens Anda daripada yang hambar.

Meskipun kami telah menunjukkan kepada Anda cara membuat menu navigasi khusus di sini, Anda masih dapat melampaui ini dan membuatnya lebih menarik. Misalnya, Anda dapat menganimasikan tampilan navigasi, memberinya warna latar belakang, dan banyak lagi. Dan apa pun yang Anda lakukan, pastikan situs web Anda menggunakan praktik desain terbaik dan tata letak yang mudah digunakan pengguna.

Cara Menggunakan Kembali Perangkat Keras Lama Anda Seperti Profesional

Memiliki banyak teknologi lama yang mengacaukan rumah Anda? Cari tahu apa yang harus dilakukan dengannya dalam panduan daur ulang teknologi ini!

Baca Selanjutnya

Tentang Penulis