Responsive hamburger menu with CSS

Javascript is always been part of developing click events, but CSS checkbox technique is great too. Using the same technique I've developed this responsive navigation, which is pretty easy to use.

See the Pen Demo for CSS hamburger menu using CSS flex by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

The only reason that it is possible with CSS is that checkbox is before <ul> tag which let us select it either checkbox is checked or unchecked.

  <nav>
    <input class='navicon' id='navicon' type='checkbox'>
    <label for='navicon'>&#xf0c9;</label>
    <ul>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Contact</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Donate</a></li>
    </ul>
  </nav>

Now, while the screen is not small, therefore we will hide checkbox and the label but in small screen we display it as block.

@media all and (max-width : 700px){
  input,label{
    display:block;
  }
  nav ul{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    opacity:0;
    visibility:hidden;
  }
  input.navicon:checked~ul{
    opacity:1;
    visibility:visible;
  }
  nav ul li{
    float:none;
    text-align:center;
    background:#05c;
  }
}

The navigation links should be hidden unless the checkbox is unchecked. The above code does it well.