Open In App

Foundation CSS Off-canvas Position

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is a free, open-source front-end framework that allows you to create dynamic web designs. It’s one of the most advanced CSS frameworks, including a responsive grid, HTML and CSS UI components, templates, and more. It also has a variety of JavaScript Extension features that can be enabled or disabled. It also renders swiftly on mobile devices thanks to the Fastclick.js utility’s integration.

When active, off-canvas panels are positioned outside of the viewport and slide. This off-canvas menu may be accessible from the left, right, top, or bottom of the screen, and it has the ability to overlap, push, and operate with sticky elements. These patterns are mobile-friendly and were designed with mobile devices in mind. On medium and desktop screens, this can also be utilized as a sidebar.

Foundation CSS Off-canvas position 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.

Foundation CSS off-canvas position class:

  • off-canvas-absolute: This class is used to set the position of the off-canvas to absolute. We can use this class to set the position of the viewport only to the container it is contained inside, normally it shows up from the side of the whole left, right, bottom, or top of the screen.

We don’t have an off-canvas-fixed class because the viewport has a fixed position which we already add when we add the off-canvas class. 

Syntax:

<div class="off-canvas-wrapper">
    <div class="off-canvas-absolute">
        <!-- Your menu or Off-canvas content goes here -->
    </div>
       <div class="off-canvas-content">
        <!-- Your Page Contents goes here --!>
    </div>
</div>

Example 1: This code below demonstrates an off-canvas viewport that has a position set to absolute

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        h2,
        h3 {
            margin-left: 20px;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
      
    <h3>Foundation CSS off-canvas position</h3>
  
    <div style="margin:1rem 5rem;">
        <button type="button" class="button" 
            data-toggle="offCanvasLeftSplit1">
            Open off-canvas with absolute position
        </button>
  
        <button type="button" class="button" 
            data-toggle="offCanvasRightSplit2" 
            style="margin-left:26rem;">
            Open off-canvas with fixed position
        </button>
  
        <div class="grid-x grid-margin-x">
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-left" 
                        id="offCanvasLeftSplit1" data-off-canvas>
                        <ul style="margin:2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
  
                    <div class="off-canvas-content" 
                        style="min-height:300px;" 
                        data-off-canvas-content>
                        <p>My off-canvas viewport is of my size!</p>
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas position-right" 
                        id="offCanvasRightSplit2" data-off-canvas>
                        <ul style="margin: 2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
  
                    <div class="off-canvas-content" 
                        style="min-height:300px;" 
                        data-off-canvas-content>
                        <p>
                            My off-canvas viewport is 
                            of full screen-size!
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

 

Example 2: This code below demonstrates multiple panels off-canvas viewport that has a position set to absolute

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
    <style>
       h2,h3
       {
        margin-left:20px;
       }
    </style>
</head>
  
<body>
    <h2 style="color:green">GeeksforGeeks</h2>
    <h3>Foundation CSS off-canvas position</h3>
    <div style="margin:1rem 5rem;">
        <button type="button" class="button" 
              data-toggle="offCanvasLeftSplit1">
              Open Left Panel
        </button>
        <button type="button" class="button" 
                data-toggle="offCanvasRightSplit2" 
                style="margin-left:35rem;">
                Open right 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-left" 
                         id="offCanvasLeftSplit1" data-off-canvas>
                        <ul style="margin:2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
                    <div class="off-canvas-content" style="min-height:300px;" 
                         data-off-canvas-content>
                          
<p>I'm the page content of the first off-canvas panel!</p>
  
                    </div>
                </div>
            </div>
            <div class="cell small-6">
                <div class="off-canvas-wrapper">
                    <div class="off-canvas-absolute position-right" 
                         id="offCanvasRightSplit2" 
                         data-off-canvas>
                        <ul style="margin: 2rem;">
                            <li><a>DSA</a></li>
                            <li><a>Algorithms</a></li>
                            <li><a>Competetive Programming</a></li>
                            <li><a>Java</a></li>
                            <li><a>C++</a></li>
                            <li><a>Python</a></li>
                        </ul>
                    </div>
                    <div class="off-canvas-content" style="min-height:300px;" 
                         data-off-canvas-content>
                          
<p>I'm the page content of the second off-canvas panel!</p>
  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

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



Last Updated : 20 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads