Cara membuat menu navigasi di html

Question

Kata "Responsive" dalam sebuah desain website biasanya dipahami atau diartikan sebagai sebuah desain website yang mendukung tampilan layar kecil, maksudnya ketika layar browser/layar pengguna yang mengakses website kita memiliki ukuran yang kecil, tampilan website jadi tidak acak - acakan atau tampilan website akan mengikuti layar pengguna.

Table of Contents Show

Apa itu Navigation pada HTML?
Navigasi bar itu apa?
Apa itu header di HTML?

Disini Saya ingin memberikan contoh sederhana tentang bagaimana membuat sebuah menu navigasi yang responsive. Berikut adalah Cara Membuat Navigasi Menu Website Responsive

1. Buatlah sebuah file CSS terlebih dahulu untuk style menunya.


body {margin:0;}
/ * Menghapus margin dan padding dari daftar , dan menambahkan warna latar 

belakang hijau * /
ul.menuatas {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #137409;
}
/*Maksudnya membuat menu berada diatas berdampingan*/
ul.menuatas li {float: left;}

/*Membuat Style link untuk bagian menu */
ul.menuatas li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
/*Membuat Style link untuk bagian background saat hover */
ul.menuatas li a:hover {background-color: #ff0000;}
/*menyembunyikan link dalam daftar pada saat laya kecil*/
ul.menuatas li.icon {display: none;}

2. Selanjutnya kita buat Style CSS pada saat browser/layar mengecil.


/ * Bila Ukuran layar kurang dari 680 pixel , maka sembunyikan menu , kecuali untuk yang Home . kemudian menampilkan menu untuk membuka dan menutup class menuatas( li.icon ) * /

@media screen and (max-width:680px) {
  ul.menuatas li:not(:first-child) {display: none;}
  ul.menuatas li.icon {
    float: right;
    display: inline-block;
  }
}
/ * class responsive ditambahkan ke "menuatas" dengan JavaScript sehingga
ketika pengguna klik icon . class
ini akan membuat menu atas terlihat baik pada layar kecil * /
@media screen and (max-width:680px) {
  ul.menuatas.responsive {position: relative;}
  ul.menuatas.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.menuatas.responsive li {
    float: none;
    display: inline;
  }
  ul.menuatas.responsive li a {
    display: block;
    text-align: left;
  }
}

3. Tahap selanjutnya kita buat fungsi Javascript untuk menghapus class responsive untuk menu atas pada saat pengguna mengklik icon

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

4. Terakhir kita buat menunya lalu panggil fungsi javascript yang kita buat sebelumnya

ul class="menuatas" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Informasi</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">Tentang Saya</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction

()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Contoh Menu Responsive</h2>
  <p>Perkecil jendela browser untuk melihat hasilnya</p>
</div>

Secara keseluruhan bila keempat script diatas digabung maka scriptnya nanti akan terlihat seperti dibawah ini


<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul.menuatas {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #137409;
}

ul.menuatas li {float: left;}

ul.menuatas li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.menuatas li a:hover {background-color: #ff0000;}
ul.menuatas li.icon {display: none;}


@media screen and (max-width:680px) {
  ul.menuatas li:not(:first-child) {display: none;}
  ul.menuatas li.icon {
    float: right;
    display: inline-block;
  }
}



@media screen and (max-width:680px) {
  ul.menuatas.responsive {position: relative;}
  ul.menuatas.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.menuatas.responsive li {
    float: none;
    display: inline;
  }
  ul.menuatas.responsive li a {
    display: block;
    text-align: left;
  }
}
</style>
</head>
<body>

<ul class="menuatas" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Informasi</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">Tentang Saya</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction

()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Contoh Menu Responsive</h2>
  <p>Perkecil jendela browser untuk melihat hasilnya</p>
</div>

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

</body>
</html>

Bila script diatas di eksekusi di browser maka kurang lebih tampilannya akan terlihat seperti gambar dibawah ini.

Tampilan layar penuhTampilan layar Responsive

Untuk lebih jelasnya Anda bisa mengcopy script yang sudah digabungkan diatas, kemudian menyimpan filenya dalam bentuk/format HTML

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simpel

Menu navigasi merupakan bagian dari website yang digunakan untuk mengarahkan ke bagian atau halaman tertentu suatu website. Menu navigasi ini tentunya akan memudahkan pengguna untuk menjelajahi konten-konten yang sudah disajikan.

Navigasi bar itu apa?

B.NavBar atau Navigation Bar adalah sebuah balok navigasi yang terletak di bagian atas halaman blog. Bentuknya kecil memanjang secara horizontal. NavBar berfungsi baik bagi pemilik atau pengunjungnya untuk melakukan hal-hal tertentu yang masih terkait dengan navigasi blog.

Apa itu header di HTML?

Tag heading biasanya digunakan untuk membuat judul pada halaman web, tag heading pada HTML terdiri dari 6 tingkatan yaitu yang terdiri dari h1 , h2 , h3 , h4 , h5 , h6 .

kode html