Pelajari cara membuat menu navigasi fixed sidebar dengan CSS.
Full height:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px; } .sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; } .sidenav a:hover { color: #f1f1f1; } .main { margin-left: 160px; /* Same as the width of the sidenav */ font-size: 28px; /* Increased text to enable scrolling */ padding: 0px 10px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div class="sidenav"> <a href="#about">About</a> <a href="#services">Services</a> <a href="#clients">Clients</a> <a href="#contact">Contact</a> </div> <div class="main"> <h2>Sidebar</h2> <p>Sidebar ini menggunakan tinggi penuh (100%) dan selalu ditampilkan.</p> <p>Scroll ke bawah halaman untuk melihat hasilnya.</p> <p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </body> </html>
Auto height:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Lebar yang sama dengan sidebar + posisi kiri dalam px */
font-size: 28px; /* Teks yang ditambahkan untuk mengaktifkan scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>Sidebar ini setinggi isinya (tautannya), dan selalu ditampilkan.</p>
<p>Scroll ke bawah halaman untuk melihat hasilnya.</p>
<p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Beberapa teks untuk mengaktifkan scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
Membuat Fixed Sidebar
Langkah 1) Tambahkan HTML
Contoh:
<!-- Side navigation --> <div class="sidenav"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <!-- Page content --> <div class="main"> ... </div>
Langkah 2) Tambahkan CSS
Contoh:
/* Sidebar menu */
.sidenav {
height: 100%; /* Full-height: hapus ini jika Anda menginginkan "auto" height */
width: 160px; /* Atur lebar sidebar*/
position: fixed; /* Fixed Sidebar (tetap di tempat pada scroll) */
z-index: 1; /* Tetap di atas */
top: 0; /* Tetap di atas */
left: 0;
background-color: #111; /* Hitam */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* Link menu navigation */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* Saat Anda mengarahkan mouse ke link navigasi, ubah warnanya */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style Halaman content */
.main {
margin-left: 160px; /* Sama dengan lebar sidebar */
padding: 0px 10px;
}
/* Pada layar yang lebih kecil, yang tingginya kurang dari 450px, ubah style sidebar (lebih sedikit padding dan ukuran font yang lebih kecil) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}