Cara Membuat Navbar Responsif dengan HTML dan CSS: Panduan Sederhana

-

Pendahuluan

Navbar (navigasi bar) yang responsif sangat penting untuk memastikan pengalaman pengguna yang baik di berbagai perangkat. Artikel ini memberikan panduan langkah demi langkah untuk membuat navbar responsif menggunakan HTML dan CSS, dirancang khusus untuk pemula.

Index.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="styles.css" />
      <title>Navbar Responsif</title>
   </head>
   <body>
      <nav>
         <div class="logo">Logo</div>
         <ul class="nav-links">
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Layanan</a></li>
            <li><a href="#">Kontak</a></li>
         </ul>
         <div class="burger">&#9776;</div>
      </nav>

      <div class="content">
         <!-- Konten Halaman Web Anda -->
      </div>
   </body>
</html>


Style.css

body {
   margin: 0;
   font-family: "Arial", sans-serif;
}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #333;
   padding: 15px 20px;
}

.logo {
   color: #fff;
   font-size: 1.5em;
}

.nav-links {
   list-style: none;
   display: flex;
}

.nav-links li {
   margin-right: 20px;
}

.nav-links a {
   text-decoration: none;
   color: #fff;
}

.burger {
   display: none;
   cursor: pointer;
   font-size: 1.5em;
   color: #fff;
}

.content {
   padding: 20px;
}

@media only screen and (max-width: 768px) {
   .nav-links {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 70px;
      left: 0;
      width: 100%;
      background-color: #333;
   }

   .nav-links.show {
      display: flex;
   }

   .nav-links li {
      margin: 0;
      text-align: center;
      padding: 10px;
   }

   .burger {
      display: block;
   }
}


script.js

<script>
    document.querySelector('.burger').addEventListener('click', function() {
        document.querySelector('.nav-links').classList.toggle('show')
    });
</script>

Kesimpulan

Dengan mengikuti panduan ini, Anda telah berhasil membuat navbar responsif menggunakan HTML dan CSS. Navbar ini dapat menyesuaikan diri dengan perangkat dengan lebar layar yang berbeda, memberikan pengalaman pengguna yang responsif dan bersahabat. Selamat mencoba dan tingkatkan sesuai kebutuhan proyek Anda!


Deskripsi.

Klik Disini  Untuk Lebih Lanjut Mengenai materi Programming Web Selanjutnya

Anda juga bisa belajar lebih dalam mengenai Pemrograman Web dengan mengikuti kursus Pemrograman Web
di kursus Dhuo Creative Medan. Dijamin Pasti Bisa Karena Ada Garansi Dan Juga Terdapat 
Banyak Diskon.

Komentar

Posting Komentar

Postingan populer dari blog ini

Why Big O Notation Matters More Than You Think

-
Gambar
“It Works On My Machine” Is a Trap You build a feature. You test it on localhost with 5 mock users in your seed data. It's instant. You ship it. Three weeks later, an on-call alert wakes you up at 2 AM. The endpoint that used to respond in 12ms is now timing out at 30 seconds. Production has 50,000 real records now, not 5. Your database CPU is pegged at 100%, your cloud bill has a weird spike, and somewhere a product manager is asking “did we get hacked?” You didn't get hacked. You got Big O'd . This is the part junior developers often miss: Big O notation isn't an academic ritual you perform to pass a coding interview and then forget. It's the engineering tool that tells you, before you ship, whether your code will survive contact with real production data — or quietly detonate in production. Let's be clear about what Big O actually predicts. It's not about exact milliseconds. Your code's real-world ...
Baca selengkapnya

Virus Ransomware

-
Gambar
   RANSOMWARE BY CHRISTIAN LUIS PASKALIS GINTING                                                                                                                                                                       Ransomware adalah serangan malware yang dikirim peretas untuk mengunci dan mengenkripsi perangkat komputer milik korban. Lalu, peretas akan meminta uang tebusan untuk memulihkan aksesnya. Kurang lebih, seperti itulah gambaran apa itu Ransomware secara sederhana. Namun, pada k...
Baca selengkapnya

Perbedaan Antara GET dan POST dalam PHP

-
Gambar
  Ketika Anda mengembangkan aplikasi web menggunakan PHP, Anda akan sering berhadapan dengan metode pengiriman data antara klien dan server. Dua metode yang paling umum digunakan dalam pengiriman data adalah GET dan POST. Meskipun keduanya memiliki tujuan yang sama, yaitu mengirim data dari klien ke server, keduanya memiliki perbedaan yang penting dalam cara mereka beroperasi. Mari kita jelajahi perbedaan antara GET dan POST dalam konteks PHP. 1. Metode Pengiriman Data GET : Ketika menggunakan metode GET, data dikirimkan melalui URL. Data yang dikirim melalui metode GET ditampilkan secara terbuka di URL, yang berarti mereka terbatas pada panjang URL tertentu. Misalnya, www.example.com/index.php?name=John&age=30 . POST : Dalam metode POST, data dikirimkan sebagai bagian dari tubuh permintaan HTTP. Ini berarti data tidak ditampilkan secara terbuka di URL dan tidak terbatas pada panjang tertentu. Data dalam metode POST dienkripsi, membuatnya lebih aman untuk mengirim data sensitif...
Baca selengkapnya