Open In App

Foundation CSS Off-canvas Transitions

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Off-canvas panels are locate outside of the viewport and slide in when activated. There are various position to open the Off-canvas menus ie., it 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 used for mobile screens. This can also be used as a sidebar on medium and desktop screens.

Off-canvas Transitions are of 2 types ie., push and overlap. In case of push transition, the panel pushes the content on the screen while in overlap case, the panel overlaps the content of the page.

Foundation CSS Off-canvas Transitions Class:

  • off-canvas: This class creates an off-canvas container.
  • off-canvas position-*: This class is used to positioned the off-canvas by specifying the particular position.
  • off-canvas-content: This is a container class, which is used to contain the main content of the page.

Foundation CSS Off-canvas Transitions Attributes:

  • data-transition=”overlap”: This attribute can be used to open the overlap & overlap the page content.
  • data-transition=”push”: This attribute can be used to push to open the sidebar as well as also pushes the page content. This is the, by default, used attribute.
  • data-off-canvas: This attribute must be added to the off-canvas container, in order to function the off-canvas properly.

Syntax:

<div class="off-canvas" data-off-canvas data-transition="overlap/push">
    Content
</div>
<div class="off-canvas-content" data-off-canvas-content>
    Content
</div>

Example 1: This is a basic example illustrating Push Transition made using Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Off-canvas Transitions</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Off-canvas Transitions</h3>
    <b>Push transition</b>
    <br>
    <button type="button"
            class="button" 
            data-toggle="offCanvasPush">Push
    </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="offCanvasPush" 
                     data-off-canvas data-transition="push">
                    <p>I am inside left off-canvas</p>
                </div>
                <div class="off-canvas-content" 
                     style="min-height: 300px;" data-off-canvas-content>
                    <p>
                        the one-stop solution is GeeksforGeeks DSA
                        Self-Paced Course with Lifetime Access
                        is a complete package for you to learn 
                        and master all the Data Structures & 
                        Algorithms concepts from scratch and that 
                        too at your own pace!
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

Example 2: This is a basic example illustrating Overlap Transition made using Foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Off-canvas Transitions</title>
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
      
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Off-canvas Transitions</h3>
    <b>Overlap transition</b>
    <br>
    <button type="button" 
            class="button" 
            data-toggle="offCanvasPush">Overlap
    </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="offCanvasPush" 
                     data-off-canvas data-transition="overlap">
                    <p>I am inside left off-canvas</p>
                </div>
                <div class="off-canvas-content" 
                     style="min-height: 300px;" data-off-canvas-content>
                        <p>
                            the one-stop solution is GeeksforGeeks DSA
                            Self-Paced Course with Lifetime Access
                            is a complete package for you to learn 
                            and master all the Data Structures & 
                            Algorithms concepts from scratch and that 
                            too at your own pace!
                        </p>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

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



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