Section Artikel
Pelajari cara membuat menu navigasi overlay layar penuh.
Lihat pada contoh di bawah untuk melihat cara kerjanya:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } </style> </head> <body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <h2>Contoh Navigasi Fullscreen Overlay</h2> <p>Klik elemen di bawah untuk membuka menu navigasi overlay layar penuh.</p> <p>Dalam contoh ini, menu navigasi akan bergeser masuk, dari kiri ke kanan:</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> <script> function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } </script> </body> </html>
Langkah 1) Tambahkan HTML
Contoh:
<!-- overlay -->
<div id="myNav" class="overlay">
<!-- Tombol untuk menutup navigasi overlay -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<!-- Konten Overlay -->
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<!-- Gunakan elemen apa saja untuk membuka / menampilkan menu navigasi overlay -->
<span onclick="openNav()">open</span>Langkah 2) Tambahkan CSS
Contoh:
/* Overlay (background) */
.overlay {
/* Tinggi & lebar tergantung pada bagaimana Anda ingin menampilkan overlay (lihat JS di bawah) */
height: 100%;
width: 0;
position: fixed; /* Tetap ditempat */
z-index: 1; /* Tetap diatas */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Warna fallback hitam */
background-color: rgba(0,0,0, 0.9); /* Hitan dengan opacity */
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* Efek transisi 0,5 detik untuk bergeser ke dalam atau ke bawah overlay (tinggi atau lebar, tergantung pada tampilan) */
}
/* Posisi konten didalam overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% dari atas top */
width: 100%; /* 100% lebar */
text-align: center; /* teks/link Centered */
margin-top: 30px; /* Margin atas 30px untuk menghindari konflik dengan tombol tutup pada layar yang lebih kecil */
}
/* Tautan navigasi di dalam overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block; /*Tampilkan blok, bukan sebaris */
transition: 0.3s; /* Efek transisi pada hover (color)*/
}
/* Saat Anda mengarahkan mouse ke tautan navigasi, ubah warnanya */
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
/* Posisikan tombol close (pojok kanan atas) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Jika tinggi layar kurang dari 450 piksel, ubah ukuran font tautan dan posisikan lagi tombol close, agar tidak tumpang tindih */
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}Langkah 3) Tambahkan JavaScript
Contoh di bawah ini menggeser menu navigasi overlay dari kiri ke kanan (lebar 0 hingga 100%), saat dipicu.
Geser dari samping:
/* Buka ketika seseorang mengklik elemen span */
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
/* Tutup saat seseorang mengklik simbol "x" di dalam overlay */
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}Contoh di bawah ini bergeser pada menu navigasi overlay dari atas ke bawah (tinggi 0 hingga 100%).
Catatan: Dalam contoh ini, perhatikan bahwa CSS sedikit berbeda dari yang di atas (tinggi default sekarang 0, lebarnya 100% dan overflow-y disembunyikan (nonaktifkan scroll vertikal, kecuali untuk layar kecil).
Geser dari atas ke bawah:
/* Open */
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}Contoh ini membuka menu navigasi tanpa animasi.
Buka menu tanpa animasi:
/* Open */
function openNav() {
document.getElementById("myNav").style.display = "block";
}
/* Close */
function closeNav() {
document.getElementById("myNav").style.display = "none";
}