OffCanvas
The navigation that responsively goes off canvas, similar to an app style menu also can be revealed in many creative ways.
There are three mode of off-canvas navigation :
Slide on top
Add a class mn--slide
to the #root
to activate the offcanvas slide mode and toggle the class mn--show
to show/hide the navigation.
<body>
<div id="root" class="root mn--slide mn--show">
...
...
</div>
</body>
Push
Add a class mn--push
to the #root
to activate the offcanvas push mode and toggle the class mn--show
to show/hide the navigation.
<body>
<div id="root" class="root mn--push mn--show">
...
...
</div>
</body>
Reveal
Add a class mn--reveal
to the #root
to activate the offcanvas reveal mode and toggle the class mn--show
to show/hide the navigation.
<body>
<div id="root" class="root mn--reveal mn--show">
...
...
</div>
</body>