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 Jorgelig

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 -->
    <nav id="navbar1" 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-1">
            <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="#">Default navbar: Animating from top to bottom</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div...

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%;
}

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);