https://github.com/pencilpix/bs.push.nav
JQuery plugin depend on bootstrap navigation to convert it into a push menu for smaller devices
https://github.com/pencilpix/bs.push.nav
bootstrap jquery
Last synced: 4 months ago
JSON representation
JQuery plugin depend on bootstrap navigation to convert it into a push menu for smaller devices
- Host: GitHub
- URL: https://github.com/pencilpix/bs.push.nav
- Owner: pencilpix
- Created: 2016-01-18T17:06:57.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-12-02T19:51:22.000Z (over 8 years ago)
- Last Synced: 2026-01-23T13:37:00.132Z (5 months ago)
- Topics: bootstrap, jquery
- Language: HTML
- Homepage:
- Size: 121 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### bs.push.nav
JQuery plugin depend on bootstrap navigation to convert it into a push/slide menu for small screen widths
#### Dependancies
* jquery 2.X
* bootstrap 3.X
#### Installation:
you can use bower to install bs.push.nav using the following command.
```
$ bower install bs-push-nav --save
```
or manually via downloading repository of the plugin and attach the required files to make it work.
include CSS just after bootstrap.css files at your ``
```
```
then include JS file after jquery and bootstrap.js at the bottom of your `` or at you set you js files to be.
```
```
all html structure required is a button that trigger the menus you want to convert into push/slide at given breakpoint
```
Toggle navigation
jQuery(document).ready(function($) {
$('.navbar-toggle').bsPushNav();
});
```
#### Options
bs.push.nav has many options that makes you control your menus
```
jQuery(document).ready(function($) {
var options = {
breakpoint: 768, // the breakpoint that determine the screen width to convert menus
typeClass: 'slide', // the default type menu is 'slide' you can set it to 'push'
targetsList: ['#menu1', '#menu2'], // or you can set it via data-target="#menu1 #menu2"
direction: 'left' // the default direction, also you can set it to right
};
$('.navbar-toggle').bsPushNav(options);
});
```
#### Events
Event | Description
--------------- | ------------------------------------------------------------------------
menuEnabled | that event will be triggered when the window hit the breakpoint and when template is ready
menuDisabled | when window is resized and break the breakpoint and the template reverted to origin
beforeShow | triggered when the button is clicked just before the menu is shown
shown | triggered when the menu is shown
beforeHide | triggered just before the menu is hidden
hidden | triggered after hiding the menu
using event:
```
$(document).on('beforeShow', '.btn', function(e){
// do some stuff
});
```
#### Methods
Method | Description
---------------- | -----------------------------------------------------------------------
'show' | shows the menu
'hide' | hides the menu
'destroy' | destroy and dettach all events applied to the plugin instance
#### Upcomming features
* support (RTL) for the menus.
* Enable required Events that should be triggered at each process.