LessCode Drawer

This library is designed for navbar component from bootstrap framework. Of course, using "JQeary selector" can be customized.
for example: $("#example,.example2").clone(true);

Why

  • flexible drawer
  • Easy to use
  • support rtl
  • can use custom elements
  • navbar component Can be used without defined options
  • ....

Install

Quick start

Start use library with CDN

Essential css

Copy-paste the stylesheet <link> into your <head> before all other stylesheets.

Essential js

It requires jQuery to use this library.

Usage

Here's how to use left to right. There are two ways for right-to-left:

  • add dir="rtl" to html tag
  • add dir:"rtl" to drawer function options

Examples

Here are some examples to get you started. After clicking on the play button you can run it again with the navbar(navbar-toggler) button.

simple drawer

Use simple bootstrap drawer with no options.
In this example, Resize event is enabled. So it closes as soon as the Drawer is displayed.

resize & class

Use resizing event and change class name Options in Drawer.

default theme

How to use the default theme.

custom element & style

Below is how to monopolize the style and add elements to the drawer.

custom enter & exit animation

In this project Pep's library is used for animation. If you use exitAnimation, you need to call the clearDrawers function
animate.css - more information

custom element & show button

Click the red button at the bottom right to open the driver again

API

We have all the functions you can use here.



drawer()

It is used to create drawer and is the first function to be called. This function takes options as input.



resizeDrawers()

This function is used for the resizing event that you have to call into your resizing event. Essential for exitResizeing option.



clearDrawer()

It destroys the drawer.



drawerShow()

Displays the Drawer.

Themes

Defined themes that can be used for clothing. click on the theme you want, the drawer will open with that theme.




usage

Substitute your theme number with 0.

Options

The following table lists all the options that can be used in the drawer function.

name type default description
class object custom class name
parentElementItems string(elements) or jQuery elements new parent element
withNavbarFormsBootstrap boolean false Add navbar form to drawer?
withNavItemBootstrap boolean true Add navbar nav-item to drawer?
withNavbarBrandBootstrap boolean true Add navbar navbar-brand to drawer?
withDropDownBotstrap boolean true Add navbar drop-down to drawer?
changeBrandSearchBotstrap boolean true change navbar-brand with input search when navbar in collapse mode?
exitResizeing boolean true close drawer when navbar exit from collapse mode?
(if use resizing event in your project should use function LessCode.resizeDrawers() in your resizing function.)
customHeadDrawer string(elements) or jQuery elements add your custom head to header drawer
headerStyle css object customized header style.
drawerInsideStyle css object customized drawer style.
drawerItemStyle css object customized drawer items style.
drawerItemHoverEnterStyle css object customized drawer items enter style.
drawerItemHoverExitStyle css object customized drawer items exit style.
textStyle css object customized drawer texts style.
addQuery function add your queary to drawer.
showInsideCloseButton boolean true show close button in drawer?
showOutsideCloseButton boolean false show close button outside drawer?
insideCloseButton string(elements) or jQuery elements customized inside close button.
outsideCloseButton string(elements) or jQuery elements customized outside close button.
customJqueryElement string(elements) or jQuery elements add your custom element to drawer.
customJqueryElementFirst boolean false add custom elements to first element drawer?
enterAnimation function customized enter animation function.
exitAnimation function customized exit animation function.
defualtStylesPosition number 0 use default theme.


class object

  • drawer: class name main drawer.
  • drawerInside: class name inside drawer.
  • drawerOutside: class name outside drawer.
  • brandKeeper: class name hedear drawer.
  • showButton: class name button show drawer.("add name custom show drawer button")

usage

Define your choice instead of ...