Bootstrap off canvas slide menu

DirectCode | July 13, 2016 | Bootstrap, CSS, Effects, HTML5, jQuery, Menu and Navigation, Tutorials | 1 Comment

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 &nbsp;<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: