DROP.JS

The fast and capable dropdown library

Watch The Youtube Presentation Video

by: Elson Correia

what is drop.js?

DropJs is a JavaScript and CSS library for creating dropdowns and other popups attached to elements on the page. Drop uses Tether.js to efficiently position its elements.

Tether.js is a client-side library to make absolutely positioned elements attach to elements in the page efficiently.

ie9+

Supported by IE9+ and all other browsers

DropJs is TetherJs dependent

ie9+

How To start

Create a Drop instance :

drop instance

OR, create Drops from a custom ‘context’:

drop instance
file links DropJs on GitHub

<div class="drop-target">

hover over me

<div>

<<< Create your target element

var myDrop = new Drop({

target: document.querySelector('.drop-target'),

content: 'This is a DropJs Sample',

classes: 'drop-popup',

position: 'bottom left',

openOn: 'hover',

});

<<< Create your drop instance

hover over me

Options

Default Options:

default options
  • target
  • content
  • position
  • openOn
  • constrainToWindow
  • constrainToScrollParent
  • classes
  • remove
  • beforeClose
  • hoverOpenDelay
  • hoverCloseDelay
  • focusDelay
  • blurDelay
  • openDelay
  • closeDelay
  • tetherOptions

<div class="drop-target2">

click me! I'll say Hello and turn Red

<div class="drop-content">

HELLO THERE!

<div>

<div>

<<< Create your target element

var myDrop2 = new Drop({

target: document.querySelector('.drop-target2'),

content: document.querySelector('.drop-content'),

classes: 'drop-theme-arrows-bounce-dark',

position: 'bottom left',

openOn: 'click',

beforeClose: function(){

document.querySelector('.drop-target2').style.backgroundColor = "#800";}

});

< Create Drop Instance

click me! I'll say Hello and turn Red
HELLO THERE!

Events & Methods

  • on(eventName, handler, [ctx])
  • off(eventName, handler)
  • ounce(eventName, handler, [ctx])
  • open()
  • close()
  • remove()
  • toggle()
  • isOpened()
  • position()
  • destroy()

var myDrop = new Drop({

target: document.querySelector('.drop-target'),

content: 'This is a DropJs Sample',

classes: 'drop-popup',

position: 'bottom left',

openOn: 'hover',

});

myDrop.open();

myDrop.off('click', function(){ '//Do Something} );

Download DropJS CheatSheet Visit DropJS Page Visit TetherJS Page

by: Elson Correia 2016