Foundation CSS Off-canvas Installation
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
Please Login to comment...