0.8.1 • Published 3 years ago
jd-menu v0.8.1
JD Menu
A lightweight, simple to use sliding menu.
Installation
NPM
npm install jd-menu --save
Yarn
yarn add jd-menu
Bower
bower install jd-menu --save
Usage
$(".some-menu).jdMenu({'duration': 500, 'trigger': $('js-menu-trigger')});
Require (NPM / Yarn)
let jdMenu = require('jd-menu');
Import (NPM / Yarn)
import jdMenu from 'jd-menu';
Require (Bower)
let jdMenu require('SomePath/bower_components/jd-menu');
CSS
@import 'SomePath/bower_components/jd-menu/dist/css/master.css';
@import 'SomePath/node_modules/jd-menu/dist/css/master.css';
SASS (NPM / Yarn)
@import 'SomePath/node_modules/jd-menu/src/css/master.scss';
SASS (Bower)
@import 'SomePath/bower_components/jd-menu/src/css/master.scss';
SASS Default Variables ( Override in your variables )
$JD-bg-color: #455A64 !default;
$JD-text-color: #fff !default;
$JD-border-color: $JD-text-color !default;
Options
All of the differnet options with there default values.
{
arrows: true,
animation: 'slide',
duration: 300,
customArrow:'<i class="fa fa-chevron-right"></i>',
customBack: '<i class="fa fa-chevron-left"></i> Back',
theme: 'default',
trigger: ''
}
Arrows
{
arrows: true, // Default
arrows: flase
}
Trigger
{
trigger: '', // Default
trigger: $('.js-menu-trigger') // Example
}
Duration
{
duration: 300, // Default
duration: 500 // Example
}
Arrows Content
{
customArrow: '<i class="fa fa-chevron-right"></i>', // Default (Font Awesome)
customArrow: '<i class="material-icons">keyboard_arrow_right</i>' // Example (Material Icons)
}
Back Button Content
{
customBack: '<i class="fa fa-chevron-left"></i> Back', // Default
customBack: '<i class="material-icons">keyboard_arrow_left</i> Back' // Example
}
Theme
More base themes coming soon !
{
theme: 'default', // Default
theme: 'custom' // Example
}
Menu Events
There are some simple events that can be called on resize for example
$('.some-menu').jdMenu('up'); // Slides up the menu
$('.some-menu').jdMenu('down'); // Slides down the menu
$('.some-menu').jdMenu('removemenu'); // Removes JdMenu from a active menu
$('.some-menu').jdMenu('startmenu'); // Restart a menu when the removemenu event has been called
// Example Usage
$(window).on('resize', function(){
$('.some-menu').jdMenu('up');
});
Dependencies
Font Awesome (For Arrows)
jQuery
0.8.1
3 years ago
0.8.0
3 years ago
0.7.0
5 years ago
0.6.3
5 years ago
0.6.2
5 years ago
0.6.1
5 years ago
0.6.0
5 years ago
0.5.7
6 years ago
0.5.6
6 years ago
0.5.5
6 years ago
0.5.3
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.0
6 years ago
0.3.4
6 years ago
0.3.3
6 years ago
0.3.2
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
1.0.0
6 years ago