Offcanvas

Note: To use offcanvas navigation, it is required that you manually add the classname zo-offCanvasContainer to the body, and wrap the page content you want to offset into an element with the classname zo-hasOffCanvas.

Toggle offcanvas

<body class="zo-offCanvasContainer">
    <div class="zo-hasOffCanvas">
    ...
    <a href="#" class="zo-btn zo-btn--primary zo--radius" data-zo-toggle="#offcanvas">Toggle offcanvas</a>
    ...
    </div>
    <div class="zo-offCanvasCover" data-zo-close="[data-zo-offcanvas-pos]" onclick="void(0)"></div>
    <div class="zo-offCanvas zo-offCanvas--left" data-zo-offcanvas-pos="left" id="offcanvas">...</div>
</body>

Positions and themes

It is not necessary to specify the theme, which defaults to light. However, as of v0.1.8, the position is required to specify both in the classname and in the data property.

On the right

<div class="zo-offCanvas zo-offCanvas--right" data-zo-offcanvas-pos="right" id="offcanvas1">...</div>

Dark theme

<div class="zo-offCanvas zo-offCanvas--left zo-offCanvas--dark" data-zo-offcanvas-pos="left" data-zo-offcanvas-theme="dark" id="offcanvas2">...</div>

ZoaUI

Offcanvas

Positions and themes