Cara Membuat Tampilan Navigasi Menu Website Responsive

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.

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 penuh Tampilan layar Responsive
tampilan layar penuh



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

26 Responses to "Cara Membuat Tampilan Navigasi Menu Website Responsive"

  1. wah keren nih mas zaelaini mulai posting kode2an,jadi saya bisa dikit2 belajar disini.

    ReplyDelete
  2. setelah udah bisa membuat menu navigasi dasar ini,kita tinggal mengembangkan ide sesuai dengan keinginan ya mas

    ReplyDelete
  3. Jika layar penuh
    Terasa nampak utuh
    Kelihatan yang kita mau butuh
    Ibarat rumah terasa teduh...

    ReplyDelete
  4. Maksudnya responsip itu untuk mengatasi kalau web di buka di browser handphone bukan kang? Kalau layar monitor komputer atau laptop kan standar ukurannya...

    ReplyDelete
    Replies
    1. yah begitu kang... jadi bisa mengikuti ukran darilaya r pengguna..

      Delete
  5. makasih mas infonya menarik.. bisa buat belajar memperbaiki blog jadul saya

    ReplyDelete
  6. Lalu efek yang akan dialami jika gagal gimana kang apakah akan eror juga terhadap websitenya ?

    ReplyDelete
  7. kang, saya izin copy diblog yha.. akan saya infokan sumbernya,

    ReplyDelete
    Replies
    1. okelah kang... :D monggo - monggo bae sayamah...

      Delete
  8. mau belajar ah, biar bisa kode-kodean :D

    ReplyDelete
  9. agak bingung gan.
    kalau bisa dibuatkan lebih detail. contoh dibuatkan 1 folder di folder apa, file CSS di simpan dalam extensi apa, begitu juga dengan file java nya. maaf sebelumnya gan, ane newbei..

    ReplyDelete
    Replies
    1. Klo buat blogger tinggal taruh dithema > sesuaikan > CSS kode

      Delete
  10. Ini taruh diwidget y gan?
    Mirip sama WonderWebwere y hasilnya😊
    Tp WonderWebwere g ada jscriptnya🤔
    Ijin copas gan buat blog sy yg baru....heheheheh

    ReplyDelete
  11. bagaimana kalau untuk membuat toggle slide menu ketika ukurannya responsive?
    misalnya seperti klik menu dan muncul slide menu dr kiri ke kanan?
    maaf kang kepanjangan

    ReplyDelete
    Replies
    1. nah itu ada lagi caranya,,,
      mungkin akan saya bahas pada lain kesempatan, sebenarnya banyak contohnya juga sih.... nanti tinggal atur posisinya...

      Delete
  12. Blog ku udah punya navigation bar, tinggal disesuaiin biar ukurannya pas sama layar. Tapi ga ngerti caranya gimana :( mohon bantuannya mas.

    Ini blog ku firdaamaliah.blogspot.com

    ReplyDelete
  13. kang kok pas saya edit mlh eror ya kang responsive nya ilng itu gmn ya kang

    ReplyDelete
  14. Terima kasih sudah bisa bikin menu responsive dari belajar di blog ini

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin