Off-canvas
CSS ONLY
The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure CSS.
By default, the off-canvas menu is collapsed whenever the window width is.
But you can add the off-canvas-sidebar-show
class to the off-canvas
to make the sidebar expanded when the window width is larger than or equal to 960px.
You can open the sidebar by adding the class active
to off-canvas-sidebar
.
And remove the active
to close it.
<div class="off-canvas">
<!-- off-screen toggle button -->
<a class="off-canvas-toggle btn btn-primary btn-action" href="#sidebar-id">
<i class="icon icon-menu"></i>
</a>
<div id="sidebar-id" class="off-canvas-sidebar">
<!-- off-screen sidebar -->
</div>
<a class="off-canvas-overlay" href="#close"></a>
<div class="off-canvas-content">
<!-- off-screen content -->
</div>
</div>