Foundation CSS is a free, open-source front-end framework that enables you to make dynamic web designs. One of the most sophisticated CSS frameworks available, it features a responsive grid, HTML and CSS UI elements, templates, and more. A number of JavaScript Extension features can be enabled or disabled as well. It renders quickly on mobile devices as well because the Fastclick.js tool is integrated.
Foundation CSS Kitchen Sink provides Foundation’s elements that can be used in our websites and apps. Kitchen Sink Off-canvas panels slide while active and are placed outside of the viewport. This off-canvas menu may overlap, push, and use sticky items. It can be accessible from the left, right, top, or bottom of the screen. These patterns are mobile-friendly and were made with mobile devices in mind. On medium and desktop screens, this can furthermore be utilized as a sidebar.
Foundation CSS Kitchen Sink Off-canvas Classes:
- off-canvas-wrapper: This class is used to wrap up the whole off-canvas container and this wraps multiple off-canvas panels together.
- off-canvas: This class is to create the off-canvas container.
- position-left: This class is used to indicate that the off-canvas should pop from the left.
- position-right: This class is used to indicate that the off-canvas should pop from the right.
- off-canvas-content: This class encloses the content which is adjacent to the off-canvas.
Foundation CSS Kitchen Sink Off-canvas Attributes:
- data-off-canvas-wrapper: This attribute is added to the wrapper that is wrapping the whole content inside off-canvas.
- data-off-canvas: This attribute is added to the off-canvas element.
- data-off-canvas-content: This attribute is added to the container having all the content.
Syntax:
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner"
data-off-canvas-wrapper>
<div class="off-canvas position-left"
id="offCanvasLeft" data-off-canvas>
<!-- left off-canvas markup -->
</div>
...
<div class="off-canvas-content"
data-off-canvas-content>
<!-- page content -->
</div>
</div>
</body>
<button type="button" class="button"
data-toggle="offCanvasLeft/offCanvasRight">
Open Menu
</button>We can use Foundation CSS Sticky classes and attributes simultaneously with this attribute. Although when we use the .data-sticky attribute the element is by default fixed with the scrolling and the opening of the off-canvas. But using the data-off-canvas-sticky attribute will on;y keep it fixed when the off-canvas is opened.
Example 1: This code example below demonstrates how to have a basic Kitchen Sink Off-canvas using above given classes and attributes:
<!DOCTYPE html> <html lang="en">
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
<style>
h2,
h3 {
margin-left: 20px;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Kitchen Sink Off-canvas</h3>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li><a href=
DSA</a>
</li>
<li><a href=
Algorithms</a>
</li>
<li><a href=
Interview Preparation</a>
</li>
<li><a href=
Topic-wise Practice</a>
</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
<!-- right off-canvas markup -->
</div>
<div class="off-canvas-content" data-off-canvas-content>
</div>
</div>
</div>
<button type="button" class="button margin-2" data-toggle="offCanvasLeft">
Open Menu
</button>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: The code below demonstrates how we can make a top bar stay in its position when the off-canvas is opened using the Foundation CSS Sticky attributes:
<!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" 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="top-bar sticky" data-sticky data-off-canvas-sticky>
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text" style="color: green;">
GeeksforGeeks
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li>
<button type="button" class="button">
Search
</button>
</li>
</ul>
</div>
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div style="margin: 1rem;">
<h3>Foundation CSS Kitchen Sink Off-canvas</h3>
</div>
<button type="button" class="button" data-toggle="off_canvas_left" style="margin: 1rem">
Click Here to open Off-Canvas
</button>
<p style="margin: 1rem;">
In this example we can see the off-canvas
opening doesn't effect the position of
the sticky element.
</p>
<p style="margin: 1rem;">
Also we can always use all the sticky classes
and attributes.
</p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/kitchen-sink.html#off-canvas