Foundation CSS Nested Off-Canvas

Last Updated : 28 Jun, 2022

Foundation CSS is a free and 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. Thanks to the integration of the Fastclick.js utility, it also renders easily on mobile devices.

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.

Nested Off-canvas enables us to eliminate adding the element as a sibling to the main content of the page by giving us the freedom to add the element in the content itself. So this feature reduces the complexity of the code to an extent and eases maintenance. Although the main utility of this feature is that it helps us to use that element for small screens while we can use the usual page element for other screen sizes which deducts duplicate content.

Foundation CSS Nested Off-canvas Classes:

There is no specific class that is used to achieve the nested off-canvas we just need to add the id with values which is either offCanvasNestedPush or offCanvasNestedOverlap. Although Push transition is not supported by the nested off-canvas so it takes overlap transition.

off-canvas: This class creates an off-canvas container.
position-left: The viewport is opened from the left side with this class.
position-right: The viewport is opened from the right side with this class.
position-top: The viewport is opened from the top side with this class.
position-bottom: The viewport is opened from the bottom side with this class.

Foundation CSS Nested Off-canvas Attributes:

offCanvasNestedPush: This attribute enables to push or slide the nested off-canvas, without collapsing the content.
offCanvasNestedOverlap: This attribute is used to overlap the nested off-canvas with the top of the navbar, i.e. it overlays with the viewport.

Syntax:

<button type="button" 
        class="button" 
        data-toggle="offCanvasNestedPush">
       Open Nested Off-Canvas Push
</button>
<button type="button" 
        class="button" 
        data-toggle="offCanvasNestedOverlap">
       ....
</button>

<div class="off-canvas positionClass" 
     id="offCanvasNestedPush" data-off-canvas>
     <div class="callout">
          <p>....</p>
          <p>....</p>
     </div>
</div>
<div class="off-canvas positionClass" 
     data-transition="overlap/push"
     id="offCanvasNestedOverlap" data-off-canvas>
     <div class="callout">...</div>
</div>

Example 1: The below example demonstrates an overlay nested off-canvas viewport.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
 
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
</head>
 
<body>
    <div style="margin:4rem;">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <strong>
            Foundation CSS Nested Off-canvas
        </strong>
    </div>
    <div style="margin:1rem 5rem;">
        <button type="button" class="button"
            data-toggle="offCanvasNestedOverlap">
            Open Nested Off-Canvas Overlap
        </button>
 
         
<p>Hello, this is an example line.</p>
 
 
        <div class="off-canvas position-left is-closed"
            id="offCanvasNestedOverlap" data-off-canvas>
            <div class="callout">
 
                 
<p>Hii Geek!!!</p>
 
                 
<p>
                    I'm a nested off-canvas that mustn't
                    be a sibling of the off-canvas 
                    content anymore.
                </p>
 
 
                 
<p>
                    I can be used a nice hidden menu 
                    in small screen sizes.
                </p>
 
            </div>
        </div>
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Output:

Example 2: The below example demonstrates even a push transition outputs an overlay transition of the off-canvas viewport.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
 
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js">
    </script>
</head>
 
<body>
    <div style="margin:4rem;">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <strong>
            Foundation CSS Nested Off-canvas
        </strong>
    </div>
    <div style="margin:1rem 5rem;">
        <button type="button" class="button"
            data-toggle="offCanvasNestedPush">
            Open Nested Off-Canvas Push
        </button>
 
         
<p>Hello, this is an example line.</p>
 
 
        <div class="off-canvas position-left is-closed"
            id="offCanvasNestedPush" data-off-canvas>
            <div class="callout">
 
                 
<p>Hii Geek!!!</p>
 
                <br>
 
                 
<p>
                    Push transition is not supported in the 
                    nested off-canvas, so here we can see 
                    that it takes the Overlay transition.
                </p>
 
                <br>
 
                 
<p>
                    I'm a nested off-canvas that mustn't be
                    a sibling of the off-canvas content anymore.
                </p>
 
 
                 
<p>
                    I can be used a nice hidden menu 
                    in small screen sizes.
                </p>
 
            </div>
        </div>
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
            Hello, this is an example paragraph.
        </p>
 
 
         
<p>
            Hello, this is an example paragraph.
        </p>
 
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>