Open In App

Foundation CSS Off-canvas Installation

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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>
        body {
            margin: 30px 50px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <strong>
            Foundation CSS Off-canvas setup
        </strong>
    </center>
  
    <div style="margin:2% 30%;">
        <button type="button" class="button" 
            data-toggle="offCanvasLeftSplit1">
            PYTHON
        </button>
  
        <button type="button" class="button" 
            data-toggle="offCanvasRightSplit3" 
            style="margin-left:5rem;">
            JAVA
        </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>Python is a high-level, general-purpose 
                            and a very popular programming language.
                            Python programming language (latest 
                            Python 3) is being used in web 
                            development, Machine Learning applications,
                            along with all cutting edge technology 
                            in Software Industry. Python Programming 
                            Language is very well suited for Beginners,
                            also for experienced programmers with other
                            programming languages like C++ and Java.
                        </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>
                            Java is easy to learn and its syntax
                            is simple and easy to understand. It 
                            is based on C++ (so easier for 
                            programmers who know C++). Java has 
                            removed many confusing and rarely-used 
                            features e.g. explicit pointers, 
                            operator overloading etc. Java also 
                            takes care of memory management and 
                            for that, it provides an automatic 
                            garbage collector. This collects the 
                            unused objects automatically.
                        </p>
                    </div>
  
                    <div class="off-canvas-content" 
                        style="min-height:300px;" 
                        data-off-canvas-content>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

 

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

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>
        body {
            margin: 30px 50px;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <strong>
            Foundation CSS Off-canvas setup
        </strong>
    </center>
  
    <div style="margin:2% 30%;">
        <button type="button" class="button" 
            data-toggle="offCanvasLeftSplit1">
            GFG logo
        </button>
  
        <button type="button" class="button" 
            data-toggle="offCanvasRightSplit3" 
            style="margin-left:5rem;">
            GFG logo
        </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><img class="thumbnail"
                                src=
                                style="width:15rem;">
                        </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><img class="thumbnail"
                                src=
                        </p>
                    </div>
                    <div class="off-canvas-content" 
                        style="min-height:300px;" 
                        data-off-canvas-content>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

 

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



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