Cara membuat hamburger menu dan dan dropdown menu murni CSS

Disamping Javascript, hari ini CSS menjadi semakin menarik dan semakin memikat. Bahkan beberapa template CSS tampak memiliki tampilan sangat baik dan bagus, dan bukan hanya itu, CSS nyaris tidak terlalu memberatkan loading atau kecepatan suatu halaman.

Ada banyak elemen elemen menarik di buat dengan CSS dan itu bekerja dengan baik di sisi SEO, mesin pencari tidak kesulitan menemukan konten di balik bungkusan CSS. Dengan CSS kita dapat membuat hover sebuah tombol reaksi seperti tombol buka dan tutup. Atau membuat warna latar, atau membuat menu gulir, fixed dan dropdown tanpa melibatkan java script sekalipun. 

Contoh menu navigasi dropdown CSS tanpa Javascript:

See the Pen CSS Menu by Sufyan Yaan (@sufyan-yaan) on CodePen.

Perhatikan kode CSSnya:

body {background: #222326; font-family: 'Lato', sans-serif;} #primary_nav_wrap ul { left: 0px; top: 0px; list-style:none; position: fixed; background: #121314; color: white; margin:0; padding:0 display: inline-table; width: 100%; } #primary_nav_wrap ul a { display: block; color: #9C9C9C; text-decoration:none; font-weight:700; font-size: 22px; line-height:32px; padding: 15px 15px; background: #121314; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -ms-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; } #primary_nav_wrap ul a:hover { color: white; background-color: #2d2f33; text-shadow: 0 0 2px white; -webkit-text-shadow: 0 0 2px white; -moz-text-shadow: 0 0 2px white; -o-text-shadow: 0 0 2px white; -ms-text-shadow: 0 0 2px white; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -ms-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; } #primary_nav_wrap ul a:active { color: #8ABF29; background-color: #2d2f33; -webkit-transition: all 50ms linear; -moz-transition: all 50ms linear; -ms-transition: all 50ms linear; -o-transition: all 50ms linear; transition: all 50ms linear; } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 background: #121314; } #primary_nav_wrap ul li.current-menu-item { background-color: #222326; } #primary_nav_wrap ul li:hover { background-color: #222326; } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background: #121314; padding:0; } #primary_nav_wrap ul ul li { float:none; width:200px } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px background: #121314; } #primary_nav_wrap ul ul ul { top:0; left:100% } #primary_nav_wrap ul li:hover > ul { display:block } div { color: #9C9C9C; font-size: 22px; box-shadow: inset 0 0 0 #222326; -webkit-box-shadow: inset 0 0 0 #222326; -moz-box-shadow: 0 0 0 #222326; -o-box-shadow: 0 0 0 #222326; -ms-box-shadow: 0 0 0 #222326; padding: 20px; -moz-border-radius: 10px; -moz-border-radius: 10px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } div:hover { font-size: 22px; color: white; -webkit-box-shadow: inset 0 0 20px blue; box-shadow: inset 0 0 20px black; -moz-box-shadow: inset 0 0 20px black; -o-box-shadow: inset 0 0 20px black; -ms-box-shadow: inset 0 0 20px black; padding: 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -ms-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } a {color: #9c9c9c; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear;} a:hover {color: white; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; } th.dash {color: white; font-size: 16px; } .verticalLine { border-left: thick solid #ff0000; } hr.small { width: 300px; border-color: #8ABF29; } /* hr.small:hover { width: 300px; border-color: #3498db; } */

Dengan CSS kita dapat membuat hover untuk menu navigasi dengan menu dropdown seperti pada contoh di atas, namun kita juga bisa membuat animasi untuk berbagai elemen. misalnya dalam pembuatan hamburger menu:

See the Pen RwKaJRq by sufyan (@sufyan33) on CodePen.

Perhatikan kode CSSnya:

body
{
  margin: 0;
  padding: 0;
  
    background: #990099	;
  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: #fff;
  
  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;
}

/*
 * Just a quick hamburger
 */
#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%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#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);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #990099;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  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;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: