Hello reader's, in this blog we are going to create a navigation menu for mobile with CSS3 and HTML. I am using the Javascript for the clicking function. Here i used "+" Adjacent sibling combinator selector to make click function for the menu.

HTML:-

Under the HTML file, we created a header for the menu. under the header created a "checkbox" and "label" for click on a button to open a menu. Menu will open with a slide down effect.   
Below is the code for the header:-

<header>
  <input type="checkbox" id="click" class="burger-input"/>
    <label for="click">
      <div class="burger"></div>
    </label>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
    </nav>
</header>

CSS:-

In the CSS file create a style for the element by adding a background, colors and other styles. I have used adjacent sibling combinator selector that allows you to select an element that is after another specific element. When you click on a checkbox the label will be clicked automatically. This will help you to create a click function in CSS3.

Here is the code for the CSS:-

header {
  background-color: #426bde;
}

.burger-input {
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 45px;
  cursor: pointer;
  position: absolute;
}
.burger-input + label {
  width: 30px;
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}
.burger-input + label:after, .burger-input + label:before,
.burger-input + label .burger {
  content: '';
  width: 25px;
  height: 4px;
  display: block;
  margin: 3px auto;
  border-radius: 3px;
  background-color: #ffffff;
  -webkit-transition: all 200ms ease-in-out;
  -moz-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
.burger-input:checked + label {
  top: 4px;
}
.burger-input:checked + label:before {
  -webkit-transform: translateY(2px) rotate(135deg);
  -moz-transform: translateY(2px) rotate(135deg);
  -ms-transform: translateY(2px) rotate(135deg);
  -o-transform: translateY(2px) rotate(135deg);
  transform: translateY(2px) rotate(135deg);
}
.burger-input:checked + label:after {
  -webkit-transform: translateY(-12px) rotate(-135deg);
  -moz-transform: translateY(-12px) rotate(-135deg);
  -ms-transform: translateY(-12px) rotate(-135deg);
  -o-transform: translateY(-12px) rotate(-135deg);
  transform: translateY(-12px) rotate(-135deg);
}
.burger-input:checked + label .burger {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.burger-input:checked ~ nav {
  display: block;
}
.burger-input:checked ~ nav li {
  display: block;
  text-align: center;
}

nav {
  display: none;
}

ul {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  text-align: center;
}
ul a {
  display: block;
  padding: 10px 0;
  color: #ffffff;
  background-color: #6281d8;
  -webkit-transition: background-color 250ms ease-in-out;
  -moz-transition: background-color 250ms ease-in-out;
  transition: background-color 250ms ease-in-out;
}
ul a:hover {
  background-color: #7691dd;
}

a {
  text-decoration: none;
}

body {
  background-color: #1D1F20;
}

*, :before, :after {
  box-sizing: border-box;
}

Hope this blog will help you to create a pure CSS3 navigation menu.