Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat navbar responsif adalah elemen penting dalam desain web. Navbar atau navigasi bar berfungsi sebagai pusat navigasi yang memudahkan pengguna untuk menjelajahi situs web. Dengan JavaScript, kamu bisa menciptakan navbar responsif yang dapat menyesuaikan diri dengan ukuran perangkat pengguna, baik itu komputer, tablet, atau smartphone.
Sebelum melompat ke JavaScript, kita harus memiliki kerangka HTML untuk navbar terlebih dahulu. Berikut adalah contoh sederhana:
<div class="navbar" id="myNavbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>Pada kode di atas, kami telah membuat navbar dengan empat link, dan satu ikon ‘hamburger’ yang akan digunakan untuk mengaktifkan navbar responsif.
CSS membantu kita untuk mempercantik tampilan navbar. Kamu bisa menambahkan kode CSS ini di bagian <head> dari HTML kamu.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
.navbar .icon {
display: none;
}Selain kode CSS di atas, kita perlu menambahkan query media yang membantu navbar menyesuaikan diri ketika ukuran layar berubah.
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}
.navbar .icon {
float: right;
display: block;
}
}Sekarang, mari kita gunakan JavaScript untuk membuat navbar menjadi responsif. Fungsinya sederhana, kita hanya perlu menambahkan dan menghapus class dari navbar kita berdasarkan kondisi.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}Sekarang, setiap kali pengguna mengklik ikon ‘hamburger’, fungsi myFunction() akan dipanggil dan mengubah class navbar.
Membuat navbar yang responsif dengan JavaScript adalah tugas yang sederhana tetapi penting dalam pengembangan web. Dengan mengikuti langkah-langkah di atas, kamu sekarang dapat membuat navbar yang responsif untuk memperbaiki navigasi di situs web kamu. Selamat mencoba!
Link terkait: