How to create hamburger menu using HTML & CSS!

Its easy to create hamburger menu using Html and css,
first we build HTML structure of hamburger menu

     <div class="hamContainer">
        <input type="checkbox">
        <div class="hamLines">
            <span class="line line1"></span>
            <span class="line line2"></span>
            <span class="line line3"></span>
        </div>
        <div class="hamItems">
            <ul>
                <li><a href="home">home</a></li>
                <li><a href="home">about</a></li>
                <li><a href="home">content</a></li>
                <li><a href="home">about</a></li>
                <li><a href="home">privacy</a></li>
                <li><a href="home">download</a></li>
            </ul>
        </div>
     </div>

Structure is done now we write Css

*{
  padding: 0;
  margin: 0;
  box-sizing: content-box;
}
body{
  background-color: blueviolet;
  display: flex;
  justify-content: center;
  align-content: center;
}

.hamContainer{
  margin-top: 5%;
  width: 30rem;
}

.hamContainer input{
  height: 50px;
  width: 50px;
  z-index: 3;
  opacity: 0;
}

.hamContainer .hamLines{
   width: 50px;
   height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-content: center;
   position: absolute;
   top: 10%;
   z-index: -1;
   /* opacity: 0; */
}

.hamContainer .hamLines span{
  height: 5px;
  width: 65px;
  background: black;
}

.hamContainer .hamItems{
     height: 25rem;
     width: 20rem;
     background: #ffff;
     display: flex;
     justify-content: center;
     align-content: center;
     display: none;
     padding: 1rem;
     border-radius: 30px;
}
.hamContainer .hamItems ul{
     list-style: none;
     text-decoration: none;
     text-transform: capitalize;
     font-size: 2em;
}
.hamContainer .hamItems ul li{
     margin: 1.5rem 0 0 2rem;
}
.hamContainer .hamItems ul li a{
     text-decoration: none;
     color: black;
}
.hamContainer .hamItems ul li a:hover{
      background: #6666;
      padding: 0.3rem 0.5rem;
      border-radius: 30px;
      border: 3px solid black;
}
.hamContainer  .hamLines .line1{
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}
.hamContainer .hamLines .line2{
  transition: transform 0.4s ease-in-out;
}
.hamContainer .hamLines .line3{
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
.hamContainer input[type="checkbox"]:checked ~ .hamItems{
  display: block;
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line1{
  transform: rotate(45deg);
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line2{
  transform: scaleY(0);
}
.hamContainer  input[type="checkbox"]:checked ~ .hamLines .line3{
  transform: rotate(-45deg);
}

Demo: Hamburger
Main thing is checkbox when checkbox is click the navitems display otherwise they will hide according to checkbox clicked hamLines Line1 Line2 & line3 transform rotate according to given degree! & line2 hide & line1 line3 change into cross.

More Stuff follow me on Twitter
Open Source Projects follow on gitHub
If You looking for cool Css animations Follow me on CodePen