Berikut adalah tutorial lengkap tentang cara membuat menu navigasi yang tetap berada di atas saat di-scroll menggunakan CSS, lengkap dengan penjelasan dan contohnya.

Tutorial: Membuat Navigasi Sticky dengan CSS

1. Persiapan Struktur HTML

Pertama, buat struktur HTML dasar dengan menu navigasi sederhana dan beberapa konten di bawahnya untuk memungkinkan halaman dapat di-scroll.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Navigation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="content">
    <p>Content goes here...</p>
    <!-- Tambahkan lebih banyak konten untuk scroll -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia velit at erat pulvinar, ac vehicula odio malesuada. Curabitur et libero nec dui fermentum varius.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
  </div>
</body>
</html>

2. Menambahkan Gaya CSS

Selanjutnya, tambahkan CSS untuk membuat menu navigasi menjadi sticky. Gunakan properti position: sticky dan top: 0 untuk membuat navigasi tetap di atas saat di-scroll.


/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.navbar {
  background-color: #333;
  padding: 10px 0;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.navbar ul li {
  display: inline;
}

.navbar ul li a {
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  display: block;
}

.navbar ul li a:hover {
  background-color: #575757;
}

.content {
  padding: 20px;
  height: 2000px; /* Menambahkan tinggi untuk memungkinkan scroll */
}

Penjelasan:

  • HTML
    • <nav class="navbar">: Elemen ini berfungsi sebagai wadah untuk navigasi.
    • <ul>: Daftar tidak berurutan yang digunakan untuk menampung item navigasi.
    • <li>: Elemen daftar yang mewakili setiap item navigasi.
    • <a>: Elemen tautan yang digunakan untuk membuat link navigasi.
  • CSS
    • body: Mengatur font dasar untuk seluruh halaman dan menghilangkan margin dan padding default.
    • .navbar:
      • background-color: Menentukan warna latar belakang untuk navbar.
      • padding: Menambahkan ruang di sekitar konten navbar.
      • position: sticky: Menjadikan navbar sticky.
      • top: 0: Menjadikan navbar tetap berada di atas saat di-scroll.
      • width: 100%: Memastikan navbar memiliki lebar penuh.
      • z-index: 1000: Menjaga agar navbar tetap di atas elemen lainnya.
    • .navbar ul: Mengatur tampilan daftar dalam navbar untuk ditampilkan secara horizontal.
    • .navbar ul li a: Mengatur gaya tautan dalam navbar, termasuk warna teks, padding, dan tampilan blok.
    • .navbar ul li a:hover: Menambahkan efek hover pada tautan dalam navbar.
    • .content: Menambahkan padding pada konten dan tinggi untuk memungkinkan scroll.

Dengan mengikuti tutorial ini, Kamu telah berhasil membuat menu navigasi yang tetap berada di atas saat di-scroll menggunakan HTML dan CSS. Semoga bermanfaat!