Cara Membuat Full screen Overlay Navigation dengan CSS + HTML

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Angga Rista October 21, 2020

Seiring dengan kemajuan teknologi, perkembangan website juga semakin maju. Kini webiste bisa di akses dari berbagai device seperti smart phone, tablet, laptop dan berbagai alat digital lainnya.

Ini tentu saja akan menjadi tantangan tersendiri bagi para pembuat website karena harus menyesuikan website buatan mereka di masing-masing device yang mempunyai perbedaan layar.

Kali ini kita akan mencoba membuat full screen overlay navigation yang sangat cocok digunakan pada device dengan layar kecil.

Langkah 1 – Tambahkan HTML

<!-- full screen nav -->
<div id="myNav" class="overlay">

  <!-- tombol untuk menutup nav -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- isi dari nav -->
  <div class="overlay-content">
    <a href="#">Tentang</a>
    <a href="#">Pelayanan</a>
    <a href="#">Pelanggan</a>
    <a href="#">Kontak</a>
  </div>

</div>

<!-- tombol untuk memunculkan full screen nav -->
<span onclick="openNav()">open</span>

Langkah 2 – Tambahkan CSS

/* full screen nav background */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

/* posisi isi dari nav */
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

/* link nav */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* link nav berubah warna ketika mouse lewat */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* tombol close nav */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* tinggi layar kurang dari 450px akan mengurangi jarak dan ukuran font */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Langkah 3 – Tambahkan JavaScript

/* ketika tombol nav di klik */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* ketika tombol close di klik */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

Berikut adalah hasilnya

<!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()">&times;</a>
  <div class="overlay-content">
    <a href="#">Tentang</a>
    <a href="#">Pelayanan</a>
    <a href="#">Pelanggan</a>
    <a href="#">Kontak</a>
  </div>
</div>

<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>