Zerolines.js

Drawer

Basic Structure

Drawer component requires drawer-toggle, drawer-content, and drawer-backdrop. You don't need to hide the drawer window by CSS, as Zerolines.js automatically hides it. 

<button type="button" data-zl="drawer-toggle target-[#drawer1]">
  Drawer Button
</button>
<div id="drawer1" zl-cloak>
  <nav data-zl="drawer-content drawer-right">
    <button type="button" data-zl="drawer-dismiss">Dismiss Button</button>
    <!-- Drawer Content Here -->
  </nav>
  <div data-zl="drawer-backdrop"></div>
</div>

drawer-toggle

drawer-toggle needs a target element to be toggled.

Item Description

target-[SELECTOR]

*required

Specify the target element to be toggled. Put a CSS selector value between [ and ]. Double Quatation is not required. The target must be only one element.

Example

drawer-toggle target-[#targetId]

drawer-content

drawer-content needs a direction from where to be drawn. drawer-right is set by default.

Item Description

Drawer Direction

drawer-right

(optional)

Drawer is shown from right.

Example

drawer-content drawer-right

drawer-left

(optional)

Drawer is shown from left.

Example

drawer-content drawer-left

drawer-top

(optional)

Drawer is shown from top.

Example

drawer-content drawer-top

Drawer Speed

quickly

(optional)

Drawer animation as quick speed.(100ms)

Example

drawer-content drawer-left quickly

slowly

(optional)

Drawer animation as slow speed.(500ms)

Example

drawer-content slowly

no-animation

(optional)

No animation.(0ms)

Example

drawer-content no-animation