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.

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:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

Tambahkan JavaScript:

cara menjaga ponsel agar tidak terlalu panas

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

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:

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

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.

Membagikan Membagikan Menciak Surel 15 Perintah Command Prompt (CMD) Windows yang Harus Anda Ketahui

Prompt perintah masih merupakan alat Windows yang kuat. Berikut adalah perintah CMD paling berguna yang perlu diketahui setiap pengguna Windows.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
HTML
CSS
JavaScript
Kiat Pengkodean

Tentang Penulis Idisou Omisola(94 Artikel Diterbitkan)

Idowu sangat menyukai teknologi dan produktivitas yang cerdas. Di waktu luangnya, dia bermain-main dengan coding dan beralih ke papan catur ketika dia bosan, tetapi dia juga suka melepaskan diri dari rutinitas sesekali. Semangatnya untuk menunjukkan kepada orang-orang tentang teknologi modern memotivasinya untuk menulis lebih banyak.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan

Cara Membuat Menu Seluler yang Dapat Dialihkan

Menjadi Lebih Kreatif Saat Membangun Situs Web Anda

Berlangganan newsletter kami