Foundation CSS Off-canvas Multiple Panels
When active, off-canvas panels are positioned outside of the viewport and slide. This off-canvas menu may be accessed from the left, right, top, or bottom of the screen, and it can overlap, push, and operate with sticky elements. These are mobile responsive patterns designed primarily for mobile devices. On medium and desktop screens, this can also be utilized as a sidebar.
Multiple panels enable us to add multiple off-canvas panels to a webpage. We can add the panels on the top, bottom, left, and right sides of the webpage or off-canvas container.
Foundation CSS Multiple Panels Classes:
There is no specific class for having multiple classes. We can just add panels in any direction like left, right, bottom, or top. We will use the basic off-canvas and Off-canvas Directional classes
- off-canvas: This class creates an off-canvas container.
- off-canvas-content: The main content of your page will be kept in this container.
- off-canvas-wrapper: This class is used to wrap up the content inside the off-canvas viewport.
- position-left: The viewport is opened from the left side with this class.
- position-right: The viewport is opened from the right side with this class.
- position-top: The viewport is opened from the top side with this class.
- position-bottom: The viewport is opened from the bottom side with this class.
Foundation CSS Multiple Panels Attribute:
- data-off-canvas: This attribute is responsible for rendering the content.
<div class="off-canvas position-class" id="" data-off-canvas> <--One panel goes here--> </div> <div class="off-canvas position-class" id="" data-off-canvas> <--Another panel goes here--> </div> <div class="off-canvas-content" data-off-canvas-content> <!-- The page content goes here --> </div>
Example 1: The code example displays how we can add two panels at the same time. One on top and one on the bottom using the directional classes.
Example 2: The code example displays how we can add three panels at the same time. One on top and on the left or right sides using the directional classes.