Foundation CSS Off-canvas

Last Updated : 18 Oct, 2022

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing 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 can 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.

Setup: For setup, create the off-canvas class and data-off-canvas attribute.

Off-canvas position: It is used to set the position of the off-canvas viewport. The default is “position: fixed” which you set by adding the off-canvas class, but off-canvas also comes with “position: absolute” which we can set using the Foundation CSS off-canvas position class. While using the off-canvas-absolute, we need to enclose the off-canvas and page contents inside the HTML div with the off-canvas-wrapper class.
Off-canvas Directions: Directions enable an Off-canvas container to require a positioning class to determine the side of the viewport it is opening ( left, right, top, bottom).
Multiple Panels: 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.
Off-canvas Transitions: Off-canvas transitions are of 2 types ie., push and overlap. In the case of push transition, the panel pushes the content on the screen while in the overlap case, the panel overlaps the content of the page.
Combining with Title Bar: It means that we use off-canvas along with the title bar as a dropdown menu or a slider to see the menu contents. It is a simple bar that contains the hamburger icon to toggle the off-canvas, along with supporting the left and right alignments.
Off-canvas Scrollbox: The off-canvas scroll box is useful in placing scrollable elements within an off-canvas.
Off-canvas Sticky enables us to preserve that “position: fixed” property. We can add the Off-canvas Sticky attribute and make sure that the element stays fixed even after the off-canvas.

Example 1: This is a basic example illustrating an off-canvas title bar.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title> 
        Foundation CSS Off-canvas Combining with Title Bar 
    </title> 
        
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
        
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
    
<body> 
    <center> 
        <h1 style="color: green;">GeeksforGeeks</h1> 
        <strong> 
            Foundation CSS Off-canvas Title Bar 
        </strong> 
    </center> 
  
    <div class="title-bar"> 
        <div class="title-bar-left"> 
          <button class="menu-icon" 
                  type="button" 
                  data-open="offCanvasTop"> 
          </button> 
          <span class="title-bar-title"> 
            Foundation title bar with GFG</span> 
        </div> 
        <div class="title-bar-right"> 
          <button class="menu-icon" 
                  type="button" 
                  data-open="offCanvasTop"> 
          </button> 
        </div> 
      </div> 
   
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html> 

Output:

Example 2: This is a basic example illustrating the off-canvas scroll box.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title>Foundation CSS Off-canvas Scrollbox</title> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
    <link rel="stylesheet" href= 
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> 
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
    
    <style> 
        body  
        { 
            margin-left: 10px; 
            margin-right: 10px; 
        } 
    </style> 
</head> 
    
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
        
    <strong>Foundation CSS Off-canvas Scrollbox</strong> 
    
    <div class="off-canvas-wrapper"> 
        <div class="off-canvas-content" 
            data-off-canvas-content  
             style="min-height:300px;"> 
            <div class="grid-x"> 
                <div class="cell"> 
                    <button type="button" 
                            class="button" 
                        data-toggle="offCanvasScrollbox"> 
                        Open GFG Off-canvas 
                    </button> <br /><br /> 
                </div> 
            </div> 
    
            <div class="off-canvas-absolute position-left" 
                id="offCanvasScrollbox" data-off-canvas 
                        data-content-scroll="false"> 
                <div style="padding:0 1rem;"> 
                    <article data-off-canvas-scrollbox  
                        style="max-height:290px;overflow:auto;  
                               padding:0.5rem 0; 
                               margin-bottom:1rem;  
                               box-shadow:inset 0 -10px 10px -10px rgba(158, 13, 13, 0.65);"> 
                        <p>List 1</p> 
                        <ul> 
                            <li>GFG 01</li> 
                            <li>GFG 02</li> 
                            <li>GFG 03</li> 
                            <li>GFG 04</li> 
                            <li>GFG 05</li> 
                            <li>GFG 06</li> 
                            <li>GFG 07</li> 
                            <li>GFG 08</li> 
                            <li>GFG 09</li> 
                            <li>GFG 10</li> 
                        </ul> 
                    </article> 
                    <article style="max-height:290px;  
                                    overflow:auto; padding:0.5rem 0;  
                                    margin-bottom:1rem;  
                                    box-shadow:inset 0 -10px 10px -10px rgba(23, 148, 60, 0.65);"> 
                        <p>List 2</p> 
                        <ul> 
                            <li>GFG 01</li> 
                            <li>GFG 02</li> 
                            <li>GFG 03</li> 
                            <li>GFG 04</li> 
                            <li>GFG 05</li> 
                            <li>GFG 06</li> 
                            <li>GFG 07</li> 
                            <li>GFG 08</li> 
                            <li>GFG 09</li> 
                            <li>GFG 10</li> 
                        </ul> 
                    </article> 
                    <article style="padding:0.5rem 0;"> 
                        <p>List 3</p> 
                        <ul> 
                            <li>GFG 01</li> 
                            <li>GFG 02</li> 
                            <li>GFG 03</li> 
                            <li>GFG 04</li> 
                            <li>GFG 05</li> 
                            <li>GFG 06</li> 
                            <li>GFG 07</li> 
                            <li>GFG 08</li> 
                            <li>GFG 09</li> 
                            <li>GFG 10</li> 
                        </ul> 
                    </article> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $(document).foundation(); 
    </script> 
</body>   
</html>