Responsive Drawer Navigation In Pure CSS

Category: CSS & CSS3 , Menu & Navigation | July 14, 2015
Author: christabor
Views Total: 6,367
Official Page: Go to website
Last Update: July 14, 2015
License: MIT

Preview:

Responsive Drawer Navigation In Pure CSS

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; }

You Might Be Interested In:


One thought on “Responsive Drawer Navigation In Pure CSS

Leave a Reply