Pure css hamburger menu | hamburger menu with css only

Introduction

First we’ll see what is a hamburger menu. A hamburger menu is a navigation bar that pops up when the hamburger symbol is clicked. The hamburger symbol is a symbol of three parallel lines that resemble a hamburger.

Why with CSS Only?

Generally, you need to use JavaScript to make a hamburger menu since JavaScript is generally used to add functionality or modify page content. However, today I’ll prove how to make a hamburger menu without JavaScript and with CSS only.

How?

So the question might be how is this possible with CSS only? Before moving on to our code, let me share how is this possible. This is done with a checkbox. We use checkbox as an indicator or receiver to inform that the user has clicked the menu. Based on that, we style CSS to change the menu size when checked.

HTML

First, paste the HTML code below.

<nav role=“navigation”>
    <div id=“openMenu”>
      <input type=“checkbox” />
      <span></span>
      <span></span>
      <span></span>
      <ul id=“menu”>
        <a href=“#”><li>Home</li></a>
        <a href=“#”><li>About</li></a>
        <a href=“#”><li>Services</li></a>
        <a href=“#”><li>Contact Us</li></a>
      </ul>
    </div>
  </nav>

Your output would be:

CSS

Then, paste the CSS Code below.

body
{
  margin: 0;
  padding: 0;
  background: royalblue;
  color: #cdcdcd;
  font-family: arial;
}
#openMenu
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
#openMenu a
{
  text-decoration: none;
  color: royalblue;
  transition: color 0.3s ease;
}
#openMenu a:hover
{
  color: mediumseagreen;
}
#openMenu input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; 
  z-index: 2; 
  -webkit-touch-callout: none;
}
#openMenu 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;
}
#openMenu span:first-child
{
  transform-origin: 0% 0%;
}
#openMenu span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#openMenu input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: royalblue;
}
#openMenu input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}
#openMenu input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}
#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;
  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;
}
#openMenu input:checked ~ ul
{
  transform: none;
}