Cara Membuat Bar Menu Mudah Alih Dengan HTML, CSS, dan JavaScript

Tidak dinafikan, anda boleh membuat menu mudah alih yang boleh ditukar menggunakan kerangka kerja CSS seperti TailWind atau BootStrap.

Tetapi apa konsep di sebalik itu? Dan bagaimana anda boleh membuatnya dari awal tanpa bergantung pada kerangka kerja CSS ini?

Melakukan perkara di atas sendiri memberi anda kawalan penyesuaian sepenuhnya. Jadi, tanpa basa-basi lagi, berikut adalah cara membuat menu mudah alih yang boleh ditukar menggunakan bahasa pengaturcaraan pilihan anda.

Sekiranya anda belum melakukannya, buka folder projek anda dan buat fail projek anda (HTML, CSS, dan JavaScript).

Di bawah ini, anda akan melihat contoh kod yang anda perlukan untuk ketiga-tiga jenis tersebut. Dan jika anda belum melakukannya, pertimbangkan untuk memuat turun aplikasi ini untuk belajar kod sebelum membaca terus.

Kita akan mulakan 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;  
 }

Tambah JavaScript:

bagaimana anda melihat siapa yang mengikuti anda di facebook

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 rupa output berfungsi apabila anda mengklik bar menu:

Menu boleh dialihkan, jadi mengklik bar lagi — atau di mana sahaja di dalam halaman — menyembunyikan navigasi.

Berkaitan: Elemen Laman Web Gaya Dengan Gradien Latar Belakang CSS

Penyemak imbas anda mungkin tidak menyokong menyembunyikan kandungan ketika anda mengklik di mana sahaja di laman web anda. Anda boleh memaksanya dengan menggunakan sasaran peristiwa dan gelung JavaScript. Anda boleh melakukannya dengan menambahkan blok kod 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 tentang apa yang baru anda lakukan: Anda membuat tiga baris menggunakan div teg HTML. Anda menyesuaikan ketinggian dan lebarnya dan meletakkannya di DOM anda. Kemudian anda memberikan acara klik ini menggunakan JavaScript.

Berkaitan: Cara Membuat Laman Web: Untuk Pemula

Anda menetapkan paparan awal navigasi anda ke tiada untuk menyembunyikannya semasa halaman dimuat. Kemudian klik acara pada tiga baris beralih navigasi ini berdasarkan kelas instansiasi JavaScript ( dipaparkan ). Akhirnya, anda menggunakan kelas baru ini untuk memaparkan navigasi menggunakan CSS, dan JavaScript toggleContents kaedah.

Berkaitan: Trend Reka Bentuk Neumorfik dalam HTML, CSS dan JavaScript

Walau bagaimanapun, selebihnya CSS bergantung pada pilihan anda. Tetapi yang terdapat dalam contoh coretan CSS di sini semestinya memberi anda idea tentang bagaimana gaya anda.

Dapatkan Lebih Kreatif Semasa Membina Laman Web Anda

Membuat laman web yang menarik secara visual memerlukan sedikit kreativiti. Dan laman web yang mesra pengguna lebih cenderung untuk menukar khalayak anda daripada yang biasa.

Walaupun kami telah menunjukkan cara membuat menu navigasi tersuai di sini, anda masih boleh melampaui ini dan menjadikannya lebih menarik. Sebagai contoh, anda dapat menghidupkan paparan navigasi, memberi mereka warna latar, dan banyak lagi. Dan apa sahaja yang anda lakukan, pastikan laman web anda menggunakan amalan dan susun atur reka bentuk terbaik yang senang digunakan oleh pengguna.

Berkongsi Berkongsi Tweet E-mel 15 Perintah Windows Command Prompt (CMD) yang mesti anda ketahui

Perintah arahan masih merupakan alat Windows yang kuat. Berikut adalah arahan CMD yang paling berguna yang perlu diketahui oleh pengguna Windows.

Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan
HTML
CSS
JavaScript
Petua Pengekodan

Mengenai Pengarang Idisou Omisola(94 Artikel Diterbitkan)

Idowu meminati apa sahaja teknologi pintar dan produktiviti. Pada masa lapang, dia bermain-main dengan pengekodan dan beralih ke papan catur ketika dia bosan, tetapi dia juga suka melepaskan diri dari rutin sekali-sekala. Kesungguhannya untuk menunjukkan kepada orang-orang tentang teknologi moden mendorongnya untuk menulis lebih banyak lagi.

Lagi Dari Idowu Omisola

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan

Cara Membuat Menu Bergerak Togglable Anda

Dapatkan Lebih Kreatif Semasa Membina Laman Web Anda

Langgan buletin kami