Home-made drawer

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <h1>Hello, world!</h1>
    
    <button id="btDrawer" class="btn btn-primary">Open drawer</button>
    
    
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies consequat tellus, nec pellentesque ipsum imperdiet at. Ut cursus ante auctor nibh sollicitudin volutpat. Maecenas lacinia nisi quam, in dignissim erat scelerisque et. Fusce iaculis mi eget justo vulputate porta. Quisque vulputate suscipit metus dignissim placerat. Maecenas eget fringilla enim. Vestibulum venenatis lobortis magna, eu mattis dui gravida in. Ut semper tincidunt urna, congue scelerisque tortor. Etiam id commodo augue, eget suscipit libero. Curabitur efficitur tortor sit amet massa pretium, vestibulum convallis eros accumsan. Suspendisse finibus eu elit sit amet posuere. Aenean venenatis tempus augue, vitae scelerisque dolor porta id.</p>

<p>Sed eu purus quis lectus scelerisque ultricies. Aenean placerat laoreet libero ut pretium. Aliquam ac justo vitae ipsum condimentum imperdiet egestas a metus. Vestibulum diam augue, scelerisque in ipsum in, elementum tristique orci. Duis faucibus eros arcu, posuere semper ligula tincidunt at. Ut vitae enim tempus, ullamcorper libero non, malesuada turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vulputate venenatis ante, nec maximus quam scelerisque et. Praesent enim lorem, pellentesque nec erat sed, consequat ultricies risus.</p>

<p>Donec at commodo libero, sit amet sagittis orci. Vestibulum eget...

CSS

#tmDrawer {
  transition-property: right;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
}

.curtain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  opacity: 0;
  transition-property: all;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
}

.drawer-main {
  position: fixed;
  right: -300px;
  width: 300px;
  top: 0;
  min-height: 100%;
  background-color: #eee;
  z-index: 90000;
}

.drawer-nav {
  overflow-y: scroll;
  overflow-x: hidden;
}

.drawer-brand {
  background-color: black;
  border-bottom: 1px solid black;
  padding: 20px 16px;
}

.drawer-brand a {
  color: white;
  padding: 0;
}

.drawer-default ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.drawer-default .drawer-menu-item {
  padding: 0;
}

.drawer-default .drawer-menu-item {
  padding: 15px 15px 0;
  font-size: 18px;
  color: #555;
}

.drawer-menuseparator {
    border-top: 1px solid #e6e6e6;
    margin: 12px 0;
}

.drawer-menu-item-icon {
    display: inline-block;
    width: 30px;
    vertical-align: middle;
}

.drawer-menu-item-text {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

.drawer-default .drawer-menu-item a, .drawer-default .drawer-menu-item a:hover, .drawer-default .drawer-menu-item a:focus {
    background-color: #FFFFFF;
    color: #333333;
    text-decoration: none;
}
.drawer-default .drawer-menu-item a {
    font-size: 14px;
    font-weight: 400;
    margin-top: 0;
    padding: 15px 0 15px 15px;
}

.drawer-default .drawer-menu-item a:hover {
    background-color: #080808;
    color: #fff;
}

JavaScript

'use strict';


var displayDrawer = function () {
  // Create the curtain
  var curtain = $('<div class="curtain">');
  $('body').append(curtain);
  
  // In order to enable the transition between a transparent to a visible curtain, we need to change the opacity
  // in a separate thread, so we use setTimeout();
  setTimeout(function() {
    // This is the real opacity we want
    curtain.css('opacity', '0.8');
   
    // Open the drawer
    var drawer = $('#tmDrawer');
    drawer.css('right', 0);
    
    // To enable the scrolling inside the drawer, we cannot set height: 100%, because percentage is relative to the
    // whole document and not the window size.
    // So we manually need to set the height of the content of the drawer, according to the size of the window.
    drawer.find('.drawer-nav').css('height', $(window).innerHeight());
    
  }, 1);
  
  // We disable the scrolling in the rest of the document
  $('body').css('overflow', 'hidden');
  
  // When the curtain is clicked...
  curtain.click(function() {
    // We remove that curtain
    curtain.remove();
    
    // We close the drawer
    var drawer = $('#tmDrawer');
    drawer.css('right', '-'+ (drawer.outerWidth()) + 'px');
    
    // We enable the scrolling of the document
    $('body').css('overflow', 'auto');
  });
};
 
$(document).ready(function() {
  $('#btDrawer').click(displayDrawer);
  
  // Refresh the height of the drawer content when the window is resized (see above why we manually set the height).
  $(window).on('resize', function() {
    $('.drawer-nav').css('height', $(window).innerHeight());
  });
});