Cara membuat Responsive Top Navigation (hamburger Menu)

Cara membuat Responsive Top Navigation (hamburger Menu)

resellerhosting murah, ceap reseller hosting

Dalam tutorial web design kali ini, HUMAYRAA akan berbagi bagaimana caranya membuat menu yang responsive. Menu responsive yang akan dibahas dalam tuto

Let’sEncrypt – Cara Install dan setting SSL Letsencrypt di Ubuntu
Cara Menyembunyikan Robots.txt dari visitor
Cara Burning ISO file ke USB Flash disk di Windows

Dalam tutorial web design kali ini, HUMAYRAA akan berbagi bagaimana caranya membuat menu yang responsive. Menu responsive yang akan dibahas dalam tutorial Web Design ini adalah Top Navigation menu dimana sat dibuka di mobile akan tampil dengan menggunakan icon 3 garis yang biasa disebut sebagai burger menu karena tumpukan 3 garis ini mirip dengan burger.

Tampilan Top Navigation Bar saat dilihat melalui PC atau Laptop:
Cara membuat burger menu, cara mebuat responsive top navigation menu, membuat menu yang responsive

Tampilan Top Navigation Bar saat dilihat melalui mobile
Cara membuat burger menu, cara mebuat responsive top navigation menu, membuat menu yang responsive

Cara Membuat Top Navigation yang Responsive

Buat Kode HTML

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

Tambahkan css

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

Tambahkan media query di css

/* Saat lebar layar kurang dari 680 pixel, sembunyikan semua menu item kecuali item yang pertama yaitu("Home"). Tampilkan juga list item yang berisi link untuk membuka menu yaitu (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. Munculnya Class ini akan mendisplay isi list menu 
*/
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

Tambahkan Javascript

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}

Script Lengkap

<!DOCTYPE html>
<html>
 <head>
 <title>Demo Menu Responsive Top Navigation</title>
 <style>
 /* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* Saat lebar layar kurang dari 680 pixel, sembunyikan semua menu item kecuali item 
yang pertama yaitu("Home"). Tampilkan juga list item yang berisi link untuk membuka 
menu yaitu (li.icon) 
*/
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
 
/* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. 
   Munculnya Class ini akan mendisplay isi list menu
*/
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

 </style>

 </head>
 <body>
 <ul class="topnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">☰</a>
  </li>
</ul>

 <script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}

 </script>
</Body>
</html>

DEMO

Incoming search terms:

Loading...
loading...

COMMENTS

WORDPRESS: 14
  • comment-avatar

    Thanks gan ijin coba

  • comment-avatar
    Firman 3 tahun ago

    bermanfaat! ^_^

    semoga berkah ilmunya…!

  • comment-avatar

    bagaimana cara menghilangkan(hidden) menu di atas jika blog di buka seperti biasa lewat browser. kodenya apa?

  • comment-avatar

    Diletakkan dimna itu gan…..
    Bisa dikasih pencerahan gan.

  • comment-avatar
  • comment-avatar

    Udah minta izin buat copas ke w3school belum gan? artikelnya sama banget sama punya mereka.
    Tetep semangat buat nulis artikel original buatan pribadi ya gan (y)
    Thanks

  • comment-avatar
    ilham ramadhan 2 tahun ago

    cara menyembunyikan menu prtama gmn mas? jd hnya mnampilkan tombol onclicknya sja. terimaksih

  • comment-avatar

    kalo buat bikin yang nembel di header terus walopun diskrol kebawah tetep ngikut apa namanya tu gan…??? pengen bikin gitu tapi gk tau namaya

  • comment-avatar

    Kayanya sih kurang responsive y gan,masalahnya menggunakan JScript yang bikin loading blog ikut berat,karena beban load ikut tambah…klo boleh tau asal scriptnya dari mana y?
    Klo saya lebih condong ke CSS dimana nilai lepasnya lebih kecil karena ukuran scriptnya jg kecil.

  • DISQUS: 0