Skip to content
Related Articles

Related Articles

Foundation CSS Off-canvas Reveal on Larger Screens

Improve Article
Save Article
  • Last Updated : 28 Jun, 2022
Improve Article
Save Article

Foundation CSS is a free, open-source front-end framework for generating flexible web designs. With a responsive grid, HTML and CSS UI components, templates, and more, it’s one of the most powerful CSS frameworks. It also contains a number of JavaScript Extension capabilities that may be turned on or off. It also renders quickly on mobile devices thanks to the integration of the Fastclick.js utility.

Off-canvas panels are positioned outside of the viewport and slide when active. This off-canvas menu can be accessed from the screen’s left, right, top, or bottom, and it can overlap, push, and operate with sticky elements. These are mobile responsive patterns that were created with mobile devices in mind. This can also be used as a sidebar on medium and desktop screens.

Off-canvas Reveal on Larger Screens is a feature that helps us manage the revealing of the off-canvas. Here we can use the specified classes to keep the off-canvas revealed in the large screen or the medium size and beyond. This feature can be helpful when we want that off-canvas viewport to act as a sidebar because we can keep the viewport open with toggling switched off in certain screen sizes.

Foundation CSS Off-canvas Reveal on Larger Screens Classes:

  • reveal-for-large: This class is used to keep the off-canvas viewport open when the screen size is large. It closes when the screen size is medium or large.
  • reveal-for-medium: This class is used to keep the off-canvas viewport open when the screen size is medium or large. It closes when the screen size is small.

Syntax:

<div class="off-canvas position-left reveal-for-large" data-off-canvas>
  <!-- The Off-canvas content -->
</div>

Example 1: In the below code demonstrates the .reveal-for-large class where the off-canvas viewport is open only in large screen sizes.

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>
</head>
 
<body>
    <div style="margin: 1rem 5rem;">
        <div class = "off-canvas-wrapper">
            <div class = "off-canvas-wrapper-inner" data-off-canvas-wrapper>
                <div class = "off-canvas position-left reveal-for-large"
                     id = "off_canvas_left" data-off-canvas>
                    <ul style="margin: 2rem;">
                        <li>
                          <a>DSA</a>
                          </li>
                        <li>
                          <a>Algorithms</a>
                          </li>
                        <li>
                          <a>Competitive 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"
                   data-off-canvas-content>
                   <div style="margin: 1rem;">
                       <h1 style="color: green;">
                         GeeksforGeeks
                         </h1>
                       <strong>
                             Foundation CSS Off-canvas
                             Reveal on Larger Screens
                       </strong>
                   </div>
                   <p style="margin: 1rem;">
                     In this example we can see the off-canvas
                     to be open only in large sized screen.
                   </p>
 
               </div>
               <button type = "button"
                       class = "button"
                       data-toggle = "off_canvas_left">
                 Click Here
              </button>
            </div>
         </div>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

Example 2: In the below example demonstrates the .reveal-for-medium-class where the off-canvas viewport is open in large and medium screen sizes.

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>
</head>
 
<body>
    <div style="margin: 1rem 5rem;">
        <div class = "off-canvas-wrapper">
            <div class = "off-canvas-wrapper-inner"
                data-off-canvas-wrapper>
                <div class = "off-canvas position-left
                              reveal-for-medium"
                     id = "off_canvas_left" data-off-canvas>
                    <ul style="margin: 2rem;">
                        <li>
                          <a>DSA</a>
                        </li>
                        <li>
                          <a>Algorithms</a>
                        </li>
                        <li>
                          <a>Competitive 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"
                   data-off-canvas-content>
                   <div style="margin: 1rem;">
                       <h1 style="color: green;">
                         GeeksforGeeks
                       </h1>
                       <strong>
                         Foundation CSS Off-canvas
                         Reveal on Larger Screens
                       </strong>
                   </div>
                   <p style="margin: 1rem;">
                     In this example we can see
                     the off-canvas to be open in large
                     and medium sized screens.
                   </p>
 
               </div>
               <button type = "button"
                       class = "button"
                       data-toggle = "off_canvas_left">
                 Click Here
               </button>
            </div>
         </div>
    </div>
    <script>
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</body>
</html>


Output:

 

Reference: https://get.foundation/sites/docs/off-canvas.html#reveal-on-larger-screens


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!