JAVASCRIPT
Off-canvas menu
All samples are using Ink.requireModules
, please read how to use it at Ink.requireModules section
Displays off-canvas content which can be triggered by clicking elements with the 'left-drawer-trigger' and 'right-drawer-trigger', respectively.
The left drawer has the 'left-drawer' class, and the right drawer has the 'right-drawer' class. The content drawer (EG your <div id="main">
) must have the 'content-drawer' class. For more, see the example below, or try the sample.
Method name | Description |
---|---|
new Drawer_1([options]) | Constructor |
options
Configuration options.options.mode
'push'This can be 'push' or 'over'.options.sides
'both'Can be 'left', 'right', or 'both'. Controls what sides have a drawer.Example
<body class="ink-drawer">
<div class="left-drawer">
Right drawer content...
</div>
<div class="right-drawer">
Left drawer content...
</div>
<div id="main-content" class="content-drawer ink-grid">
<a class="left-drawer-trigger" href="">Open left drawer</a>
<a class="right-drawer-trigger" href="">Open right drawer</a>
Content...
</div>
</body>
<script>
Ink.requireModules(['Ink.UI.Drawer_1'], function (Drawer) {
new Drawer();
});
</script>