Belajar cara membuat menu sidebar yang bisa diciutkan.
Contoh:
Klik pada tombol untuk membuka sidebar yang bisa diciutkan.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: "Lato", sans-serif; } .sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar a:hover { color: #f1f1f1; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } #main { transition: margin-left .5s; padding: 16px; } /* Pada layar yang lebih kecil, yang tingginya kurang dari 450px, ubah style sidenav (lebih sedikit padding dan ukuran font yang lebih kecil) */ @media screen and (max-height: 450px) { .sidebar {padding-top: 15px;} .sidebar a {font-size: 18px;} } </style> </head> <body> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Buka Sidebar</button> <h2>Collapsed Sidebar</h2> <p>Klik pada ikon menu / bar hamburger untuk membuka sidebar, dan dorong konten ini ke kanan.</p> </div> <script> function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } </script> </body> </html>
Section Artikel
Membuat Sidebar yang Diciutkan
Langkah 1) Tambahkan HTML
Contoh:
<div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Buka Sidebar</button> <h2>Collapsed Sidebar</h2> <p>Konten...</p> </div>
Langkah 2) Tambahkan CSS
Contoh:
/* Menu sidebar */
.sidebar {
height: 100%; /* Tinggi Penuh 100% */
width: 0; /* lebar 0 - ubah ini dengan JavaScript */
position: fixed; /* Stay ditempat */
z-index: 1; /* Stay diatas */
top: 0;
left: 0;
background-color: #111; /* Hitam */
overflow-x: hidden; /* Nonaktifkan horizontal scroll */
padding-top: 60px; /* Tempatkan konten 60px dari atas */
transition: 0.5s; /* Efek transisi 0,5 detik untuk meluncur di sidebar */
}
/* Link sidebar */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Saat Anda mengarahkan mouse ke link navigasi, ubah warnanya */
.sidebar a:hover {
color: #f1f1f1;
}
/* Posisikan dan style tombol close (pojok kanan atas) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Tombol yang digunakan untuk membuka sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
/* Style konten halaman - gunakan ini jika Anda ingin mendorong konten halaman ke kanan saat Anda membuka navigasi samping */
#main {
transition: margin-left .5s; /* Jika Anda menginginkan efek transisi */
padding: 20px;
}
/* Pada layar yang lebih kecil, yang tingginya kurang dari 450px, ubah style sidenav (lebih sedikit padding dan ukuran font yang lebih kecil) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}Langkah 3) Tambahkan JavaScript
Contoh:
/* Atur lebar sidebar menjadi 250px dan margin kiri konten halaman menjadi 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Atur lebar sidebar menjadi 0 dan margin kiri konten halaman menjadi 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
