HTML / CSS Only Off-canvas Slide and Push Navigation

Must Read : HTML / CSS Only Off-canvas Slide and Push Navigation

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-slide.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.

Load the Font Awesome 4 for menu toggle icons.

Create a menu toggle control using CSS checkbox hacks.

The html structure for the slide menu.

Create a menu toggle button inside the main content.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/acasaprogramming/pure-css-offcanvas-menu/archive/master.zip” linkrel=””]

(Visited 298 times, 1 visits today)

Leave a Comment.