title: Bootstrap offcanvas slide right to left
body: <p>On click of "Hamburger", slide the off canvas from right to left. If click on outside off canvas should close. I have till here. Please help out.</p>
  
  <blockquote>
    <p>The <a href="https://jsfiddle.net/mohanacchu/5af1m4tv/3/" rel="nofollow noreferrer">JsFiddle here</a></p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-side-menu {
    overflow: auto;
    font-family: verdana;
    font-size: 12px;
    font-weight: 200;
    background-color: #2e353d;
    position: fixed;
    top: 0px;
    width: 300px;
    height: 100%;
    color: #e1ffff;
    margin-top:50px;
  }
  .nav-side-menu .brand {
    background-color: #23282e;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 14px;
  }
  .nav-side-menu .toggle-btn {
    display: none;
  }
  .nav-side-menu ul,
  .nav-side-menu li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    line-height: 35px;
    cursor: pointer;
    /*    
      .collapsed{
         .arrow:before{
                   font-family: FontAwesome;
                   content: "\f053";
                   display: inline-block;
                   padding-left:10px;
                   padding-right: 10px;
                   vertical-align: middle;
                   float:right;
              }
       }
  */
  }
  .nav-side-menu ul :not(collapsed) .arrow:before,
  .nav-side-menu li :not(collapsed) .arrow:before {
    font-family: FontAwesome;
    content: "\f078";
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: right;
  }
  .nav-side-menu ul .active,
  .nav-side-menu li .active {
    border-left: 3px solid #d19b3d;
    background-color: #4f5b69;
  }
  .nav-side-menu ul .sub-menu li.active,
  .nav-side-menu li .sub-menu li.active {
    color: #d19b3d;
  }
  .nav-side-menu ul .sub-menu li.active a,
  .nav-side-menu li .sub-menu li.active a {
    color: #d19b3d;
  }
  .nav-side-menu ul .sub-menu li,
  .nav-side-menu li .sub-menu li {
    background-color: #181c20;
    border: none;
    line-height: 28px;
    border-bottom: 1px solid #23282e;
    margin-left: 0px;
  }
  .nav-side-menu ul .sub-menu li:hover,
  .nav-side-menu li .sub-menu li:hover {
    background-color: #020203;
  }
  .nav-side-menu ul .sub-menu li:before,
  .nav-side-menu li .sub-menu li:before {
    font-family: FontAwesome;
    content: "\f105";
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
  }
  .nav-side-menu li {
    padding-left: 0px;
    border-left: 3px solid #2e353d;
    border-bottom: 1px solid #23282e;
  }
  .nav-side-menu li a {
    text-decoration: none;
    color: #e1ffff;
  }
  .nav-side-menu li a i {
    padding-left: 10px;
    width: 20px;
    padding-right: 20px;
  }
  .nav-side-menu li:hover {
    border-left: 3px solid #d19b3d;
    background-color: #4f5b69;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }
  @media (max-width: 767px) {
    .nav-side-menu {
        top:0;
        right:0;
      
      position: absolute;
      width: 30%;
     
    }
    /*.nav-side-menu .toggle-btn {*/
    /*  display: block;*/
    /*  cursor: pointer;*/
    /*  position: absolute;*/
    /*  right: 10px;*/
    /*  top: 10px;*/
    /*  z-index: 10 !important;*/
    /*  padding: 3px;*/
    /*  background-color: #ffffff;*/
    /*  color: #000;*/
    /*  width: 40px;*/
    /*  text-align: center;*/
    /*}*/
    .brand {
        display:none !important;
  
    }
  }
  @media (min-width: 767px) {
    .nav-side-menu .menu-list .menu-content {
      display: block;
    }
  }
  body {
    margin: 0px;
    padding: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;!------ Include the above in your HEAD tag ----------&gt;
  
  &lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  
  
  &lt;!----&gt;
  &lt;nav class="navbar navbar-expand-lg navbar-inverse bg-light navbar-fixed-top navbar-color "&gt;
          &lt;div class="container-fluid"&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-content"&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
                  &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Home LOGO&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
                          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Trouble Logging in ?&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Videos&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="nav-item"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
                  &lt;form class="navbar-form navbar-right" action="/action_page.php"&gt;
                          &lt;div class="input-group"&gt;
                            &lt;input type="text" class="form-control input-field" placeholder="Search" style="border-right: 0px;"&gt;
                            &lt;span class="input-group-btn"&gt;
                          &lt;button class="btn btn-default search-icon" type="submit"&gt;
                                &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                            &lt;/span&gt;
                          &lt;/div&gt;
                  &lt;/form&gt;
                  
                
            &lt;/div&gt; 
                 
               
          &lt;/div&gt;
        &lt;/nav&gt;
  
  
  
  
  
  
  &lt;!----&gt;
  
  
  
  
  
  
  
  &lt;div class="nav-side-menu"&gt;
       &lt;div class="brand"&gt;Content&lt;/div&gt;
     
      &lt;i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"&gt;&lt;/i&gt;
    
          &lt;div class="menu-list"&gt;
    
              &lt;ul id="menu-content" class="menu-content collapse out"&gt;
                  &lt;li&gt;
                    &lt;a href="#"&gt;
                    &lt;i class="fa fa-dashboard fa-lg"&gt;&lt;/i&gt; Dashboard
                    &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li  data-toggle="collapse" data-target="#products" class="collapsed active"&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-gift fa-lg"&gt;&lt;/i&gt; UI Elements &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;ul class="sub-menu collapse" id="products"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;CSS3 Animation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;General&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Buttons&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Tabs &amp; Accordions&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Typography&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;FontAwesome&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Slider&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Panels&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Widgets&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Bootstrap Model&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
  
                  &lt;li data-toggle="collapse" data-target="#service" class="collapsed"&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-globe fa-lg"&gt;&lt;/i&gt; Services &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;  
                  &lt;ul class="sub-menu collapse" id="service"&gt;
                    &lt;li&gt;New Service 1&lt;/li&gt;
                    &lt;li&gt;New Service 2&lt;/li&gt;
                    &lt;li&gt;New Service 3&lt;/li&gt;
                  &lt;/ul&gt;
  
  
                  &lt;li data-toggle="collapse" data-target="#new" class="collapsed"&gt;
                    &lt;a href="#"&gt;&lt;i class="fa fa-car fa-lg"&gt;&lt;/i&gt; New &lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;ul class="sub-menu collapse" id="new"&gt;
                    &lt;li&gt;New New 1&lt;/li&gt;
                    &lt;li&gt;New New 2&lt;/li&gt;
                    &lt;li&gt;New New 3&lt;/li&gt;
                  &lt;/ul&gt;
  
  
                   &lt;li&gt;
                    &lt;a href="#"&gt;
                    &lt;i class="fa fa-user fa-lg"&gt;&lt;/i&gt; Profile
                    &lt;/a&gt;
                    &lt;/li&gt;
  
                   &lt;li&gt;
                    &lt;a href="#"&gt;
                    &lt;i class="fa fa-users fa-lg"&gt;&lt;/i&gt; Users
                    &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
       &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>The transition from right to left.
    The transition from right to left and on click outside off canvas menu should close.
    I'm getting unwanted background dark color at the beginning itself. </p>
  </blockquote>