Contents
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.
When the menu is being opened, the page slides out of view, revealing the menu and blocking the page from interaction. This kind of behavior is called an “off-canvas” menu. An “on-canvas” menu on the other hand, is always opened and visible. It is not prepended to the BODY and will not slide out the page.
What is off canvas CSS?
“Off Canvas” patterns are different ways to approach layout where content on the web isn’t just laid out in a vertical column. For instance, navigation could be positioned hidden off the left edge of the “canvas” (visible browser window) and slid in on demand.
What is off canvas WordPress?
Off-canvas is a term that refers to a navigation strategy in which navigation content is literally moved off the screen and out of view. When it is needed, a button of some sort is clicked and the main content is pushed off canvas, while the sidebar content is moved on.
What is off canvas panel?
This is usually set when one has a long article on a page or wishes to display a menu like the one on our website. These side panels are also known as Off-canvas panels or flyouts.
This is how an off-canvas menu works: The user clicks an icon or performs some sort of action (e.g. swiping left to right on a touchscreen device) that results in a vertical navigation menu sliding into the screen from off canvas.
What is Bootstrap CSS?
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
Your menu or Off-canvas content goes here –> Im a unique off-canvas container all on my own! I have nothing to do with the off-canvas on the right! Im a unique off-canvas container all on my own!
Is there a plugin for off canvas sidebars?
“Off-Canvas Sidebars & Menus (Slidebars)” is open source software. The following people have contributed to this plugin. “Off-Canvas Sidebars & Menus (Slidebars)” has been translated into 1 locale. Thank you to the translators for their contributions.
Can a page open from any direction on off canvas?
It can open from any direction, left, right, top, and bottom. There are options to allow the Off-canvas to push your page over or to overlap your page plus a few other neat tricks. Setting up the Off-canvas only requires two elements!
Which is the default transition in off-canvas?
You can switch the default transition of the off-canvas from pushing the page over as it open to overlapping the page by adding the data-transition=”overlap” to the .off-canvas . There are 2 available transitions: push ( data-transition=”push”) which is the default, and overlap ( data-transition=”overlap” ).