mk.drawer

A library agnostic, fully customizable, CSS animated, mobile friendly 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

option	default	description
width	200	width of drawer in pixels. If drawer attached to top or bottom, then it will be height of drawer.
attachment	left	Side of block, where drawer is located - 'top','bottom','left' or 'right'
content	null	HTML-string or DOM Element
container	null	Parent 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.
mask	true	If true, then when drawer is opened, underlying content will be overlapped by mask
class	null	user assigned CSS class of drawer
trigger	null	trigger button. If nothing is set, then trigger will be a squared button attached to drawer.
triggerOffset	20	standard trigger offset in pixels according to drawer corner
triggerAttachment	top	point 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'
});