Membuat Side Menu Hamburger dengan CSS

Membuat Side Menu Hamburger dengan CSS – Hallo semuanya, pada kesempatan kali ini saya akan. Membagikan sebuah tips tentang bagaimana cara membuat side menu hamburger dengan CSS.  Hamburger menu adalah trend tombol menuyang biasa digunakan pada bootstrap. Saya juga pernah membuat artikel tentang cara membuat collapsible menu dengan bootstrap dan Partial Side Nav dengan Bootstrap.

Baiklah, untuk cara membuat side menu hamburger dengan css bisa kita mulai dengan membuat struktur htmk sederhana seperti berikut.

Kode HTML

<nav role="navigation">
  <div id="menuToggle">
    <!--
    Checkbox palsu sebagai indikasi menu muncul atau tersembunyi
    -->
    <input type="checkbox" />
    
    <!--
    Tiap baris span mewakili satu garis pada menu hamburger
    -->
    <span></span>
    <span></span>
    <span></span>
    
    
    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
      <a href="https://dumetschool.com/" target="_blank"><li>Show me more</li></a>
    </ul>
  </div>
</nav>

Selanjutnya kita akan menggunakan CSS untuk membuat fungsi toggle dengan memanfaatkan checkbox.


Kode CSS

body
{
  margin: 0;
  padding: 0;
 
  background: #232323;
  color: #cdcdcd;
  font-family: "Avenir Next", "Avenir", sans-serif;
}

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
 
  z-index: 1;
 
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
 
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
 
  cursor: pointer;
 
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
 
  -webkit-touch-callout: none;
}
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
 
  background: #cdcdcd;
  border-radius: 3px;
 
  z-index: 1;
 
  transform-origin: 4px 0px;
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * embuat posisi absolute
 * pada sisi kiri atas
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
 
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* anti flicker pada safari*/
 
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * Menyembunyikan menu
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

Baiklah dengan kode diatas seharusnya kita sudah berhasil membuat Menu Hamburger hanya dengan menggunakan CSS. Trik ini sangat unik, karena banyak yang mengira CSS hanya digunakan untuk menghias website. Dimana sebenarnya kita juga bisa memanipulasi interaksi dengan menggunakan css.

6 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat