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 CSS1. 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!