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