Foundation CSS is an open-source and 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.
Off-canvas panels are positioned outside of the viewport and slide in when activated. These off-canvas menus 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 for mobile screens. This can also be used as a sidebar on medium and desktop screens.
The off-canvas scroll box is useful in placing scrollable elements within an off-canvas.
Foundation CSS off-canvas scroll box classes:
- off-canvas: This class creates an off-canvas container.
- data-off-canvas-scrollbox: This contains scrollable elements inside the off-canvas.
- off-canvas-content: The main content of your page will be in this container.
- button: This creates a button that can be used to open or close the panel.
Syntax:
<div class="off-canvas position-class" id=""
data-off-canvas data-off-canvas-scrollbox>
<!-- menu or off-canvas content -->
</div>
<div class="off-canvas-content"
data-off-canvas-content>
<!-- page content -->
</div>Note:
- The data-off-canvas attribute must be added to the off-canvas container.
- The id attribute of the off-canvas is unique so that it can be targeted by the click trigger by a button.
- The data-off-canvas-content attribute must be added to the off-canvas-content container which consists of the content of the page.
- The attribute data-open or data-toggle is added to any element to open an off-canvas panel when clicked on it.
- The value of the attributes data-open or data-toggle must be equal to the unique id of the off-canvas container.
- The data-close attribute is used to close an off-canvas panel.
- The default value of an off-canvas container is position: fixed.
Example 1: This is a basic example illustrating the left side off-canvas scroll box created using Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Off-canvas Scrollbox</title>
<!-- 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-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Off-canvas Scrollbox</strong>
<div class="off-canvas-wrapper">
<div class="off-canvas-content" data-off-canvas-content style="min-height:300px;">
<div class="grid-x">
<div class="cell">
<button type="button" class="button" data-toggle="offCanvasScrollbox">
Open Off-canvas
</button> <br /><br />
</div>
</div>
<div class="off-canvas-absolute position-left" id="offCanvasScrollbox" data-off-canvas
data-content-scroll="false">
<div style="padding:0 1rem;">
<article data-off-canvas-scrollbox
style="max-height:290px;
overflow:auto; padding:0.5rem 0;
margin-bottom:1rem;
box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
<p>List 1</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
</ul>
</article>
<article style="max-height:290px;
overflow:auto; padding:0.5rem 0;
margin-bottom:1rem;
box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);"> <p>List 2</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
</ul>
</article>
<article style="padding:0.5rem 0;">
<p>List 3</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
</ul>
</article>
</div>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: This is a basic example illustrating the right side off-canvas scroll box created using Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS Off-canvas Scrollbox</title>
<!-- 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-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Off-canvas Scrollbox</strong>
<div class="off-canvas-wrapper">
<div class="off-canvas-content" data-off-canvas-content style="min-height:300px;">
<div class="grid-x">
<div class="cell">
<button type="button" class="button" data-toggle="offCanvasScrollbox">
Open Off-canvas
</button>
</div>
</div>
<div class="off-canvas-absolute position-right" id="offCanvasScrollbox" data-off-canvas
data-content-scroll="false">
<div style="padding: 0 1rem;">
<article data-off-canvas-scrollbox
style="max-height:290px; overflow:auto;
padding:0.5rem 0; margin-bottom:1rem;
box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);">
<p>List 1</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
</ul>
</article>
<article style="max-height:290px;
overflow:auto; padding:0.5rem 0;
margin-bottom: 1rem;
box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,0.65);"> <p>List 2</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
</ul>
</article>
<article style="padding:0.5rem 0;">
<p>List 3</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
</ul>
</article>
</div>
</div>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/off-canvas#off-canvas-scrollbox