Pada suatu hari, Budi (nama samaran) masuk ke salah satu website yang penuh dengan konten. Ketika sedang asik scroll ke bawah, tiba-tiba Budi teringat. Pada bagian Navbar ada link menuju ke suatu halaman yang sangat menarik. Tetapi, Budi harus scroll lagi ke atas untuk mencari Navbar pada website tersebut.
Sangat menyedihkan ketika Budi harus scroll ke bagian atas website lagi. Oleh karena itu, pada materi kali ini kita akan mempermudahkan Budi dengan membuatkan Fixed Top Navbar. Sebuah Navbar yang posisinya berada terus di bagian atas website.
Langkah 1 – Tambahkan HTML
Langkah 2 – Tambahkan CSS
/* navbar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
/* link navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* merubah warna background link ketika mouse lewat */
.navbar a:hover {
background: #ddd;
color: black;
}Berikut adalah hasilnya
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {margin:0;} .navbar { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background: #ddd; color: black; } .main { padding: 16px; margin-top: 30px; height: 1500px; } </style> </head> <body> <div class="navbar"> <a href="#">Beranda</a> <a href="#">Berita</a> <a href="#">Kontak</a> </div> <div class="main"> <h1>Fixed Top Menu</h1> <h2>Scroll halaman ini untuk melihat hasilnya</h2> <h2>Navbar akan tetap berada di atas layar</h2> <p>Ini adalah text Ini adalah text...</p> <p>Ini adalah text Ini adalah text...</p> <p>Ini adalah text Ini adalah text...</p> <p>Ini adalah text Ini adalah text...</p> <p>Ini adalah text Ini adalah text...</p> </div> </body> </html>
