Foundation CSS Off-canvas Multiple Panels

Last Updated : 23 Jun, 2022

Foundation CSS is a front-end framework for creating flexible web designs that are free and open-source. It’s one of the most powerful CSS frameworks, with a responsive grid, HTML and CSS UI components, templates, and more that operate across all platforms. It also has a number of optional JavaScript Extension capabilities. Thanks to the integration of the Fastclick.js utility, it also renders swiftly on mobile devices.

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.

Syntax:

<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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- 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> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
          GeeksforGeeks 
         </h1> 
        <strong> 
              Foundation CSS Off-canvas Multiple Panels 
          </strong> 
    </center> 
    <div style="margin: 2% 30%;"> 
        <button type="button" 
                class="button"
                data-toggle="offCanvasTopSplit1"
                style="margin-left: 4rem;"> 
            Open top Panel 
        </button> 
        <button type="button" 
                class="button"
                data-toggle="offCanvasBottomSplit2"
                style="margin-left: 12rem;"> 
            Open bottom Panel 
        </button> 
        <div class="grid-x grid-margin-x"> 
            <div class="cell small-6"> 
                <div class="off-canvas-wrapper"> 
                    <div class="off-canvas-absolute position-top"
                        id="offCanvasTopSplit1" data-off-canvas> 
                        <p>I am inside Top off-canvas</p> 
                    </div> 
                    <div class="off-canvas-content"
                        style="min-height: 300px;"
                        data-off-canvas-content> 
                    </div> 
                </div> 
            </div> 
            <div class="cell small-6"> 
                <div class="off-canvas-wrapper"> 
                    <div class="off-canvas-absolute position-bottom"
                        id="offCanvasBottomSplit2" data-off-canvas> 
                        <p>I am inside Bottom off-canvas</p> 
                    </div> 
                    <div class="off-canvas-content"
                        style="min-height: 300px;"
                            data-off-canvas-content> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html>

Output:

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- 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> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green;"> 
              GeeksforGeeks 
          </h1> 
        <strong> 
              Foundation CSS Off-canvas Multiple Panels 
          </strong> 
    </center> 
    <div style="margin:2% 30%;"> 
        <button type="button" 
                class="button"
                data-toggle="offCanvasLeftSplit1"> 
            Open Left Panel 
        </button> 
        <button type="button" 
                class="button"
                data-toggle="offCanvasTopSplit2"
                style="margin-left: 5rem;"> 
            Open Top Panel 
        </button> 
        <button type="button" 
                class="button"
                data-toggle="offCanvasRightSplit3"
                style="margin-left: 5rem;"> 
            Open Right Panel 
        </button> 
        <div class="grid-x grid-margin-x"
             style="width:50rem;"> 
            <div class="cell small-6" 
                 style="margin-left:-4rem;"> 
                <div class="off-canvas-wrapper"> 
                    <div class="off-canvas-absolute position-left"
                         id="offCanvasLeftSplit1" data-off-canvas> 
                        <p>I am inside left off-canvas</p> 
                    </div> 
                    <div class="off-canvas-content"
                         style="min-height:300px;"
                         data-off-canvas-content> 
                    </div> 
                </div> 
            </div> 
            <div class="cell small-6" 
                 style="margin-left:-14rem;width:14rem;"> 
                <div class="off-canvas-wrapper"> 
                    <div class="off-canvas-absolute position-top"
                        id="offCanvasTopSplit2" data-off-canvas> 
                        <p>I am inside Top off-canvas</p> 
                    </div> 
                    <div class="off-canvas-content"
                        style="min-height:300px;"
                        data-off-canvas-content> 
                    </div> 
                </div> 
            </div> 
            <div class="cell small-6" 
                 style="margin-left:-15rem;"> 
                <div class="off-canvas-wrapper"> 
                    <div class="off-canvas-absolute position-right"
                         id="offCanvasRightSplit3" data-off-canvas> 
                        <p>I am inside right off-canvas</p> 
                    </div> 
                    <div class="off-canvas-content"
                         style="min-height:300px;"
                        data-off-canvas-content> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html>