mk.drawer

A library agnostic, fully customizable, CSS animated UI widget. You can attach it to any block. You can place it on any side. You can change view of trigger button, or assign any other element as a trigger.

Download from GIT Hub Download as NPM package

Inclusion

Include script and style sheet into you page:

<script src="path/to/plugin/mk-drawer.min.js"></script>
<link href="path/to/plugin/mk-drawer.min.css" rel="stylesheet">

Usage

var drawer = new mk.drawer(content);
var drawer = new mk.drawer(options);
var drawer = new mk.drawer(content,options);

Content can be a HTML-string or DOM Element. If string given, drawer will be attached to document body. If DOM Element given, drawer will be attached to its parent node.

Options is a set of drawer options

Options

optiondefaultdescription
width200width of drawer in pixels. If drawer attached to top or bottom, then it will be height of drawer.
attachmentleftSide of block, where drawer is located - 'top','bottom','left' or 'right'
contentnullHTML-string or DOM Element
containernullParent of drawer element. You can directly point to any element as a container. Otherwise it depends on content. If content is a string, then parent=document.body. If content is a DOM Element, then container is its parent node.
masktrueIf true, then when drawer is opened, underlying content will be overlapped by mask
classnulluser assigned CSS class of drawer
triggernulltrigger button. If nothing is set, then trigger will be a squared button attached to drawer.
triggerOffset20standard trigger offset in pixels according to drawer corner
triggerAttachmenttoppoint of origin for trigger offset - 'top','bottom','left' or 'right'
triggerContent html code inside standard trigger button, by default is a sandwich icon.

Examples

Drawers madness

Here is a for secret drawer. This drawer has no standard trigger button, because alternative trigger element given.

'C' drawer has optional css class added for alternative styling.

Drawer instance has methods 'open', 'close' and 'toggle'. To open drawer call . Thus you can combine standard trigger and additional control elements.

Bottom drawer has no mask.

// body drawer (at left top corner of the page)
new mk.drawer(contentEl.innerHTML);

// left drawer
new mk.drawer(
	contentEl.innerHTML, // content as a string
	{ container:box1 } // options
);

// secret drawer, only options given
new mk.drawer({
	content:contentEl.innerHTML,
	container:box1,
	trigger: secretTriggerEl
});

// top A drawer
new mk.drawer({
	content:contentEl.innerHTML,
	container:box1,
	attachment:'top',
	width:50,
	triggerAttachment:'right', // count trigger offset from right corner
	triggerOffset:200,
	triggerContent:'A'
});

// top B drawer
new mk.drawer({
	content:contentEl.innerHTML,
	container:box1,
	attachment:'top',
	width:50,
	triggerAttachment:'right',
	triggerOffset:150,
	triggerContent:'B'
});

// top C drawer,
// remember instance to control drawer through javascript
var drC = new mk.drawer({
	content:contentEl.innerHTML,
	container:box1,
	attachment:'top',
	class:'inverse', // user defined css class for alternative styling
	width:50,
	triggerAttachment:'right',
	triggerOffset:100,
	triggerContent:'C'
});

// bottom
new mk.drawer({
	content:contentEl.innerHTML,
	container:box1,
	attachment:'bottom',
	mask:false,
	width:100
});

// right drawer
new mk.drawer({
	content:contentEl.innerHTML,
	container:box1,
	attachment: 'right',
	triggerAttachment: 'bottom'
});