HTML / CSS Only Off-canvas Slide and Push Navigation

Category: CSS & CSS3 , Menu & Navigation | October 20, 2015
Author: acasaprogramming
Views Total: 7,322
Official Page: Go to website
Last Update: October 20, 2015
License: MIT

Preview:

HTML / CSS Only Off-canvas Slide and Push Navigation

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>

You Might Be Interested In:


Leave a Reply