Foundation CSS Off-canvas Installation

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011. It makes it easy to lay out stunning responsive websites, apps, and emails that appear fantastic and can be accessible to any device.

Off-canvas panels are positioned outside of the viewport and slide when activated. This Off-canvas menu can open from left, right, top or bottom, overlap our content, push our content, and work with sticky elements. These are responsive mobile patterns mainly for mobile screens. This can also be used as a sidebar on medium and desktop screens.

For setup/installation, create the off-canvas class and data-off-canvas attribute. Also, create a positioning class to determine which side of the viewport it opens from:

• .position-left
• .position-right
• .position-top
• .position-bottom
   

 

Syntax:

<div class="off-canvas position-left" 
 id="offCanvas" data-off-canvas>
 ...
</div>

Example 1: Let us see an example that describes the off-canvas position.

Output:

👁 Image

Example 2: Let us see an example that describes the off-canvas position.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/off-canvas.html#setup