Bootstrap 3 sliding menu (off canvas)

This demonstrates an off-canvas sliding menu using the navbar component in Bootstrap 3. This solution overwrites some of the CSS styles in Bootstrap. The JS code is for subscribing to the collapse events triggered by the toggle button.

by silviagreen

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!--
Example taken from http://getbootstrap.com/components/#navbar-default
-->

<div id="wrapper">

    <!-- Default navbar: Animating from top to bottom -->
    

  

    <!-- Modified navbar: Animating from right to left (off canvas) -->
    <nav id="navbar2" class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Modified navbar: Animating from right to left (off canvas)</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse" id="bs-example-navbar-collapse-2">
          <ul class="nav navbar-nav">
            <li class="menu-item active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="menu-item dropdown dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                
                <li class="menu-item dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Dropdown2

                        <span class="caret"></span>
                    </a>

                  <ul class="dropdown-menu" role="menu">
                     ...

CSS

/* Reset responsive Bootstrap elements */
#navbar2 .navbar-header {
    float: none;
}

#navbar2 .navbar-toggle {
    display: block;
}

#navbar2 .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
}

#navbar2 .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

#navbar2 .navbar-form {
    float: none !important;
    padding: 0;
}

#navbar2 .navbar-nav>li {
    float: none;
}

/* Reposition elements affected by the sliding menu */
#wrapper {
    position: relative;
    right: 0;
    transition: right 0.35s ease;
}

#navbar2 .navbar-collapse {
    position: fixed;
    top: 0;
    right: -30%;
    display: block;
    width: 30%;
    height: 100% !important;
    /*max-height: 100%;*/
    margin: 0;
    background-color: #f8f8f8;
    transition: right 0.35s ease;
}

#navbar2 .navbar-collapse.collapsing {
    transition: right 0.35s ease;
}

#navbar2 .navbar-collapse.in {
    right: 0;
}

body.menu-slider.in {
    overflow: hidden;
}

body.menu-slider #wrapper {
    transition: right 0.35s ease;
}

body.menu-slider.in #wrapper {
    right: 30%;
}



.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

JavaScript

(function ($) {

    'use strict';

    // Toggle classes in body for syncing sliding animation with other elements
    $('#bs-example-navbar-collapse-2')
        .on('show.bs.collapse', function (e) {
            $('body').addClass('menu-slider');
        })
        .on('shown.bs.collapse', function (e) {
            $('body').addClass('in');
        })
        .on('hide.bs.collapse', function (e) {
            $('body').removeClass('menu-slider');
        })
        .on('hidden.bs.collapse', function (e) {
            $('body').removeClass('in');
        });

})(jQuery);

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault(); 
    // Avoid having the menu to close when clicking
    event.stopPropagation(); 
    // If a menu is already open we close it
    //$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    // opening the one you clicked on
    if($(this).parent().hasClass('open')){
    	$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
    }else{
    $(this).parent().addClass('open');

    var menu = $(this).parent().find("ul");
    var menupos = menu.offset();
  
    if ((menupos.left + menu.width()) + 30 > $(window).width()) {
        var newpos = - menu.width();      
    } else {
        var newpos = $(this).parent().width();
    }
    menu.css({ left:newpos });
    }

});