Author: | oncebot |
---|---|
Views Total: | 2,492 views |
Official Page: | Go to website |
Last Update: | December 4, 2019 |
License: | MIT |
Preview:

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