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"; }