HTML / CSS Only Off-canvas Slide and Push Navigation

Preview:

Description:

A modern, mobile-friendly navigation solution to create an off-canvas slide or push menu using pure CSS / CSS3 and plain html. It currently provides 4 CSS files to define the look of the off-canvas menu:

• slide.css: left slide menu
• right-slude.css: right slide menu
• left-push.css: left push menu
• right-push.css: right push menu

Basic usage:

Load the slide.css to create a left slide menu on your web page.

<link rel="stylesheet" href="css/slide.css">

Load the Font Awesome 4 for menu toggle icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Create a menu toggle control using CSS checkbox hacks.

<input type="checkbox" id="offcanvas-menu" class="toggle" />

The html structure for the slide menu.

<aside class="menu-container">
  <div class="menu-heading clearfix">
    <label for="offcanvas-menu" class="close-btn">
      <i class="fa fa-times"></i>
    </label>
  </div><!--end menu-heading-->
<nav class="slide-menu">
  <ul>
    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
    <li><a href="#"><i class="fa fa-star"></i>Favorites</a></li>
    <li><a href="#"><i class="fa fa-folder-open"></i>Categories</a></li>
    <li><a href="#"><i class="fa fa-cogs"></i>Settings</a></li>
  </ul>
</nav><!--end slide-menu -->
</aside>

Create a menu toggle button inside the main content.

<label for="offcanvas-menu" class="full-screen-close"></label>
<div class="menu">
  <label for="offcanvas-menu" class="toggle-btn">
    <i class="fa fa-bars"></i>
  </label>
</div>