Sliding Drawer Navigation With Blur Effect – Pushbar.js

Category: Javascript , Menu & Navigation | July 20, 2018
Author: oncebot
Views Total: 1,638
Official Page: Go to website
Last Update: July 20, 2018
License: MIT

Preview:

Sliding Drawer Navigation With Blur Effect – Pushbar.js

Description:

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" class="pushbar from_left">
  <div class="title"><span data-pushbar-close class="close push_right"></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" class="pushbar from_right">
  <div class="title"><span data-pushbar-close class="close push_right"></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" class="pushbar from_top">
  <div class="title"><span data-pushbar-close class="close push_right"></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" class="pushbar from_bottom">
  <div class="title"><span data-pushbar-close class="close push_right"></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.

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

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

Changelog:

07/20/2018

  • Fixed Scrollbar css property

You Might Be Interested In:


Leave a Reply