Cara Membuat Navigasi Bawah Responsif

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

by Catur Kurnia Sari November 29, 2020

Pelajari cara membuat menu navigasi bawah yang responsif dengan CSS dan JavaScript.

Section Artikel

1 Navigasi Bawah Responsif
2 Buat Navbar Bawah Responsif

Navigasi Bawah Responsif

Ubah ukuran jendela browser untuk melihat cara kerja menu navigasi responsif.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;  
  position: fixed;
  bottom: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    bottom:0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}
</style>
</head>
<body>

<div class="navbar" id="myNavbar">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>

<div style="padding-left:16px">
  <h2>Contoh Navigasi Bawah yang Responsif</h2>
  <p>Ubah ukuran jendela browser untuk melihat cara kerjanya.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
</script>

</body>
</html>

Buat Navbar Bawah Responsif

Langkah 1) Tambahkan HTML

Contoh:

<div class="navbar" id="myNavbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

Link dengan class =”icon” digunakan untuk membuka dan menutup bar navigasi pada layar kecil.

Langkah 2) Tambahkan CSS

Contoh:

/* Tempatkan bar navigasi di bagian bawah halaman, dan tempelkan */
.navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Beri style link di dalam bar navigasi */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Ubah warna link saat mengarahkan kursor */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Tambahkan warna background menjadi hijau ke link aktif */
.navbar a.active {
  background-color: #4CAF50;
  color: white;
}

/* Sembunyikan link yang membuka dan menutup navbar di layar kecil */
.navbar .icon {
  display: none;
}

Tambahkan kueri media.

Contoh:

/* Jika layar kurang dari 600 piksel, sembunyikan semua link, kecuali yang pertama ("Home"). Tampilkan link yang berisi harus membuka dan menutup navbar (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* Kelas "responsive" ditambahkan ke bar navigasi dengan JavaScript saat pengguna mengklik ikon. Kelas ini membuat bar navigasi terlihat bagus di layar kecil (tampilkan link secara vertikal, bukan horizontal) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Langkah 3) Tambahkan JavaScript

Contoh:

/* Peralihan antara menambahkan dan menghapus kelas "responsive" pada bar navigasi saat pengguna mengklik ikon */
function myFunction() {
  var x = document.getElementById("myNavbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}

How To