(cache) drawer | blivesta

Setup Basic

<!-- drawer CSS -->
<link rel="stylesheet" href="./dist/css/drawer.min.css">
<!-- Vendor js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- drawer js -->
<script src="./dist/js/drawer.min.js"></script>
<script>
$(document).ready(function() {
$('#drawer').drawer();
});
</script>
</head>
<body id="drawer" class="drawer-left">
<button class="drawer-toggle btn btn-outline-white">
Drawer toggle
</button>
<div class="drawer-masta drawer-default">
<nav class="drawer-nav " role="navigation">
  <div class="drawer-brand">
    <a href="./">drawer</a>
  </div>
  <ul class="nav drawer-nav-list">
    <li><a href="./base">base</a></li>
  </ul>
</nav>
</div>
<div class="drawer-overlay">
<!-- contents -->
</div>
</body>

Setup Responsive drawer

Left

<body id="drawer" class="drawer-left drawer-responsive">
...
</body>

Right

<body id="drawer" class="drawer-right drawer-responsive">
...
</body>

Options

$('.drawer').drawer({
  mastaClass:        "drawer-masta",
  navClass:          "drawer-nav",
  navListClass:      "drawer-nav-list",
  overlayClass:      "drawer-overlay",
  toggleClass:       "drawer-toggle",
  upperClass:        "drawer-overlay-upper",
  openClass:         "drawer-open",
  closeClass:        "drawer-close",
  responsiveClass:   "drawer-responsive",
  desktopEvent:      "click",  // or mouseover 
  drawerWidth:       280
});

API Methods

Open

$('#element').drawer('open');

Close

$('#element').drawer('close');

Toggle

$('#element').drawer('toggle');

Destroy

$('#element').drawer('destroy');