Bootstrap off canvas slide menu
A simple tutorial, where we can get know quickly how to put things together to get the “off canvas slide menu” solution.
Bootstrap off canvas slide menu – a good and simple solution as jQuery plugin
The main point is to prepare a structure, based on HTML5 and Bootstrap.
... <ul class="list-unstyled main-menu"> <li class="text-right"><a href="#" id="nav-close">X</a></li> <li><a href="#">Menu One <span class="icon"></span></a></li> <li><a href="#">Menu Two <span class="icon"></span></a></li> <li><a href="#">Menu Three <span class="icon"></span></a></li> <li> <a href="#">Dropdown</a> <ul class="list-unstyled"> <li class="sub-nav"> <a href="#">Sub Menu One <span class="icon"></span></a> </li> <li class="sub-nav"> <a href="#">Sub Menu Two <span class="icon"></span></a> </li> ... <li class="sub-nav"> <a href="#">Sub Menu X <span class="icon"></span></a> </li> </ul> </li> <li><a href="#">Menu Four <span class="icon"></span></a></li> <li><a href="#">Menu Five <span class="icon"></span></a></li> </ul> <!-- Top --> <div class="navbar navbar-inverse navbar-fixed-top"> <a class="navbar-brand" href="#">Off Canvas Menu</a> <div class="navbar-header pull-right"> <a id="nav-expander" class="nav-expander fixed"> MENU <i class="fa fa-bars fa-lg white"></i> </a> </div> </div>
Let’s add CSS and a little bit of jQuery to get a nice, final effect, for example:

Please take a look at full tutorial for details.
Demo:
http://blog.themearmada.com/demos/off-canvas-menu
Detailed info and download:
http://blog.themearmada.com/off-canvas-slide-menu-for-bootstrap
See also:
Tutorial: Creating a responsive menu in jQuery, HTML5 and CSS
CSS3 and jQuery single page scrolling plugin – singular.js
jQuery sticky menu navigation – stickUp
Responsive, toggle sidebar menu in jQuery
A nice jQuery and Bootstrap tree view plugin – Easy-Tree.js
Context menu with jQuery and Bootstrap – ContextJS
Enjoy!
Related Posts
-
Top 5 articles January 2016
No Comments | Feb 1, 2016 -
Skitter – multiple style slideshow
No Comments | Oct 31, 2015 -
jQuery plugin for custom checkboxes and radio buttons – wCheck
No Comments | Mar 9, 2016 -
A good jQuery text counter plugin
No Comments | Feb 9, 2016