Pelajari cara membuat animasi pada menu side navigation yang dapat ditutup.
Contoh:
<!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: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } </style> </head> <body> <div id="mySidenav" class="sidenav"> <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> <h2>Contoh Animasi Sidenav</h2> <p>Klik elemen di bawah untuk membuka menu navigasi samping.</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } </script> </body> </html>
Section Artikel
Langkah 1) Tambahkan HTML:
Contoh:
<div id="mySidenav" class="sidenav"> <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> <!-- Gunakan elemen apa saja untuk membuka sidenav --> <span onclick="openNav()">open</span> <!-- Tambahkan semua konten halaman di dalam div ini jika Anda ingin side navigasi mendorong konten halaman ke kanan (tidak digunakan jika Anda hanya ingin sidenav berada di atas halaman --> <div id="main"> ... </div>
Langkah 2) Tambahkan CSS
Contoh:
/* menu side navigation */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - ubang dengan JavaScript */
position: fixed; /* Tetap ditempat */
z-index: 1; /* Tetap diatas */
top: 0; /* Tetap diatas */
left: 0;
background-color: #111; /* Hitam */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Tempatkan konten 60px dari atas */
transition: 0.5s; /* Efek transisi 0,5 detik bergeser di sidenav tersebut */
}
/* Link menu navigasi */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* Saat Anda mengarahkan mouse ke tautan navigasi, ubah warnanya */
.sidenav a:hover {
color: #f1f1f1;
}
/* Posisikan dan style tombol tutup (pojok kanan atas) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style konten halaman - gunakan ini jika Anda ingin mendorong konten halaman ke kanan saat Anda membuka navigasi samping */
#main {
transition: margin-left .5s;
padding: 20px;
}
/*Pada layar yang lebih kecil, yang tingginya kurang dari 450px, ubah gaya sidenav (lebih sedikit padding dan ukuran font yang lebih kecil) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}Langkah 3) Tambahkan JavaScript
Contoh di bawah ini navigasi samping bergeser dan membuat lebarnya menjadi 250px.
Contoh Overlay Sidenav:
/* Setel lebar navigasi samping menjadi 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Setel lebar navigasi samping ke 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}Contoh di bawah ini navigasi samping bergeser dan mendorong konten halaman ke kanan (nilai yang digunakan untuk menyetel lebar sidenav juga digunakan untuk menyetel margin kiri dari “konten halaman”):
Konten Dorong Sidenav:
/* Setel lebar navigasi samping menjadi 250px dan margin kiri konten halaman menjadi 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Setel lebar navigasi samping ke 0 dan margin kiri konten halaman ke 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}Contoh di bawah ini juga navigasi samping bergeser dan mendorong konten halaman ke kanan, hanya kali ini, kami menambahkan warna background hitam dengan opasitas 40% ke elemen body, untuk “menyorot” navigasi samping:
Sidenav Push Content dengan opacity:
/* Atur lebar navigasi samping menjadi 250px dan margin kiri konten halaman menjadi 250px dan tambahkan warna latar belakang hitam ke badan */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Setel lebar navigasi samping ke 0 dan margin kiri konten halaman ke 0, dan warna background body putih */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
Contoh di bawah ini adalah slide di navigasi samping dari kiri dan menutupi seluruh halaman (lebar 100%):
Sidenav Lebar penuh:
/* Buka sidenav */
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
/* Tutup/Sembunyikan sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}Contoh di bawah ini membuka dan menutup menu navigasi samping tanpa animasi:
Sidenav tanpa Animasi
/* Buka sidenav */
function openNav() {
document.getElementById("mySidenav").style.display = "block";
}
/* Tutup/sembunyikan sidenav */
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}Contoh di bawah ini menunjukkan cara membuat menu navigasi sisi kanan:
Navigasi sisi kanan:
.sidenav {
right: 0;
}Contoh di bawah ini menunjukkan cara membuat menu navigasi samping yang selalu ditampilkan (Fixed).
Selalu tampilkan sidenav:
/* sidenav */
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Halaman konten */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
}