Blogger Ever

Responsive hamburger menu with CSS

Hamburger menu since after responsive designed witnessed too much. It provides a good visible, big links and touch friendly links for mobile websites. But using Javascript is not always a good idea. Lets make it pure 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.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.