Responsive Drawer Navigation In Pure CSS

Preview:

Description:

A responsive navigation solution which uses input:checked pseudo selector to reveal a drawer menu sliding from the left or right hand side of the screen. You can change the breakpoint through media queries in the CSS.

How to use it:

Load the core stylesheet menu.css in the head section.

<link rel="stylesheet" type="text/css" href="menu.css">

Create a checkbox based menu toggle.

<input type="checkbox" id="mobile-menu-toggle" class="mobile-menu-toggle mobile-menu-toggle-button">

Create a standard navigation menu from a nav list.

<ul id="plain-menu" class="mobile-toggleable-menu mobile-left">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Portfolio</a></li>
</ul>

Replace the mobile-left with mobile-right to reveal the drawer menu on the right side.

<ul id="plain-menu" class="mobile-toggleable-menu mobile-right">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Portfolio</a></li>
</ul>

Create a toggle icon.

<label class="mobile-left mobmenu-toggle" for="mobile-menu-toggle">+</label>

Style the drawer menu whatever you like.

.mobile-toggleable-menu {
  background-color: #333;
  color: #fff;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
}
.mobmenu-toggle {
  background-color: orange;
  color: #fff;
  font-size: 35px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
}
.mobile-toggleable-menu li {
  display: inline-block;
  padding: 0;
  margin: 0;
  height: 40px;
  line-height: 40px;
}
.mobile-toggleable-menu li a {
  height: 100%;
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #444;
  text-decoration: none;
  color: #fff;
  padding: 0 20px;
}
.mobile-toggleable-menu li a:hover {
  background-color: #222;
  color: orange;
}
.mobmenu-toggle:hover { background-color: darkOrange; }