Sliding Drawer Navigation With Blur Effect – Pushbar.js

Pushbar.js is a mobile-friendly drawer navigation for the modern web app that slides the navigation menu from the edge of your screen while blurring the main content.

How to use it:

Link to the Pushbar’s JavaScript and Stylesheet.

<link rel="stylesheet" href="pushbar/pushbar.css">
<script src="pushbar/pushbar.js"></script>

Create the drawer navigation menus:

<aside data-pushbar-id="left" data-pushbar-direction="left">
  <div class="title"><span data-pushbar-close>Close</span> Left sidebar menu</div>
  <ul class="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About</li>
    <li>Contact</li>
    <li>Github</li>
  </ul>
</aside>
<aside data-pushbar-id="right" data-pushbar-direction="right">
  <div class="title"><span data-pushbar-close>Close</span> Right</div>
  <ul class="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About</li>
    <li>Contact</li>
    <li>Github</li>
  </ul>
</aside>
<aside data-pushbar-id="top" data-pushbar-direction="top">
  <div class="title"><span data-pushbar-close>Close</span> Top</div>
  <ul class="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About</li>
    <li>Contact</li>
    <li>Github</li>
  </ul>
</aside>
<aside data-pushbar-id="bottom" data-pushbar-direction="bottom">
  <div class="title"><span data-pushbar-close>Close</span> Bottom</div>
  <ul class="menu">
    <li>Home</li>
    <li>Products</li>
    <li>About</li>
    <li>Contact</li>
    <li>Github</li>
  </ul>
</aside>

Create toggle buttons to reveal the navigation menus when needed.

<div class="pushbar_main_content">
  Main content here
  <button data-pushbar-target="left">Left pushbar</button>
  <button data-pushbar-target="right">Right pushbar</button>
  <button data-pushbar-target="top">Top pushbar</button>
  <button data-pushbar-target="bottom">Bottom pushbar</button>
</div>

Initialize the Pushbar and done.

new Pushbar();

Enable/disable the blur effect.

new Pushbar({
    blur:true
});

Enable/disable the background overlay.

new Pushbar({
    overlay:true
});

Open/close the drawer panel manually.

pushbar.open('left');  
pushbar.close();

Changelog:

12/04/2019

• Beautify code and added changes to core files

07/20/2018

• Fixed Scrollbar css property