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 and 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.
The Off-canvas panels are located outside of the viewport and slide in when activated. There are various positions to open the Off-canvas menus ie., it 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 used for mobile screens. This can also be used as a sidebar on medium and desktop screens.
Variable Used:
Variable-Name | Description | Type | Default-Value |
---|---|---|---|
$offcanvas-sizes | This variable is used to define the width map of a left/right off-canvas panel. | Map | small: 250px |
$offcanvas-vertical-sizes | This variable is used to define the height map of a top/bottom off-canvas panel. | Map | small: 250px |
$offcanvas-background | This variable is used to define the background color of an off-canvas panel. | Color | $light-gray |
$offcanvas-shadow | This variable is used to define the box shadow for the off-canvas overlap panel. | Shadow | 0 0 10px rgba($black, 0.7) |
$offcanvas-inner-shadow-size | This variable is used to define the inner box shadow size for the off-canvas push panel. | Number | 20px |
$offcanvas-inner-shadow-color | This variable is used to define the inner box shadow color for the off-canvas push panel. | Color | rgba($black, 0.25) |
$offcanvas-overlay-zindex | This variable is used to define the z-index of an off-canvas content overlay. | Number | 11 |
$offcanvas-push-zindex | This variable is used to define the z-index of an off-canvas panel with the push transition. | Number | 12 |
$offcanvas-overlap-zindex | This variable is used to define the z-index of an off-canvas panel with the overlap transition. | Number | 13 |
$offcanvas-reveal-zindex | This variable is used to define the z-index of an off-canvas panel using the reveal-for-* classes or mixin. | Number | 12 |
$offcanvas-transition-length | This variable is used to define the length of the animation on an off-canvas panel. | Number | 0.5s |
$offcanvas-transition-timing | This variable is used to define the timing function of the animation on an off-canvas panel. | Keyword | ease |
$offcanvas-fixed-reveal | If this variable is true, then it will reveal that off-canvas will be fixed-position and scroll with the screen. | Bool | true |
$offcanvas-exit-background | This variable is used to define the background color for the overlay that appears when an off-canvas panel is open. | Color | rgba($white, 0.25) |
$maincontent-class | This variable is used to define the CSS class used for the main content area. | ‘off-canvas-content’ | |
$titlebar-background | This variable is used to define the background color of a title bar. | Color | $black |
$titlebar-color | This variable is used to define the color of text inside a title bar. | Color | $white |
$titlebar-padding | This variable is used to define the padding inside a title bar. | Length | 0.5rem |
$titlebar-text-font-weight | This variable is used to define the font weight of text inside a title bar. | Weight | bold |
$titlebar-icon-color | This variable is used to define the color of menu icons inside a title bar. | Color | $white |
$titlebar-icon-color-hover | This variable is used to define the color of menu icons inside a title bar on hover. | Color | $medium-gray |
$titlebar-icon-spacing | This variable is used to define the spacing between the menu icon and text inside a title bar. | Length | 0.25rem |
Example 1: In the below code, we will use the above variable to demonstrate the use of the Off-canvas.
<!DOCTYPE html> < html lang = "en" >
< head >
< title > Foundation CSS Off-canvas Combining with Title Bar </ title >
<!-- Compressed CSS -->
< link rel = "stylesheet" href =
<!-- Compressed JavaScript -->
< script src =
</ script >
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< center >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 > A computer science portal for geeks</ h3 >
</ center >
< div class = "title-bar" >
< div class = "title-bar-left" >
< button class = "menu-icon" type = "button"
data-open = "offCanvasLeftSplit1" data-close>
</ button >
< span class = "title-bar-title" >
Foundation
</ span >
</ div >
< div class = "title-bar-right" >
< button class = "menu-icon"
type = "button"
data-open = "offCanvasRightSplit2" >
</ button >
</ div >
</ div >
< div class = "grid-x grid-margin-x"
style = "list-style-type:none;" >
< div class = "cell small-6" >
< div class = "off-canvas-wrapper" >
< div class = "off-canvas-absolute position-left"
id = "offCanvasLeftSplit1" data-off-canvas>
< button class = "close-button" aria-label = "Close menu"
type = "button" data-close>
< span aria-hidden = "true" >
×
</ span >
</ button >
< ul class = "menu vertical" >
< li >
< a href = "#" >One</ a >
</ li >
< li >
< a href = "#" >Two</ a >
</ li >
< li >
< a href = "#" >Three</ a >
</ li >
</ ul >
</ div >
< div class = "off-canvas-content"
style = "min-height:300px;" data-off-canvas-content>
</ div >
</ div >
</ div >
< div class = "cell small-6" >
< div class = "off-canvas-wrapper" >
< div class = "off-canvas-absolute position-right"
id = "offCanvasRightSplit2" data-off-canvas>
< button class = "close-button" aria-label = "Close menu"
type = "button" data-close>
< span aria-hidden = "true" >
×
</ span >
</ button >
< ul class = "menu vertical" >
< li >
< a href = "#" >Four</ a >
</ li >
< li >
< a href = "#" >Five</ a >
</ li >
< li >
< a href = "#" >Six</ a >
</ li >
</ ul >
</ div >
< div class = "off-canvas-content"
style = "min-height:300px;" data-off-canvas-content>
</ div >
</ div >
</ div >
</ div >
< script >
$(document).foundation();
</ script >
</ body >
</ html >
|
SASS Code:
$offcanvas-background: lightgrey; .title-bar { background-color:$offcanvas-background; }
Compiled CSS Code:
.title-bar { background-color: lightgrey; }
Output:
Example 2: In the below code, we will use the above variable to demonstrate the use of the off-canvas class.
<!DOCTYPE html> < html lang = "en" >
< head >
< title > Foundation CSS Off-canvas Combining with Title Bar </ title >
<!-- Compressed CSS -->
< link rel = "stylesheet" href =
<!-- Compressed JavaScript -->
< script src =
</ script >
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< center >
< h1 style = "color:green;" >GeeksforGeeks</ h1 >
< h3 > A computer science portal for geeks</ h3 >
</ center >
< div class = "title-bar" >
< div class = "title-bar-left" >
< button class = "menu-icon" type = "button"
data-open = "offCanvasLeftSplit1" data-close>
</ button >
< span class = "title-bar-title" >
Foundation
</ span >
</ div >
< div class = "title-bar-right" >
< button class = "menu-icon"
type = "button"
data-open = "offCanvasRightSplit2" >
</ button >
</ div >
</ div >
< div class = "grid-x grid-margin-x"
style = "list-style-type:none;" >
< div class = "cell small-6" >
< div class = "off-canvas-wrapper" >
< div class = "off-canvas-absolute position-left"
id = "offCanvasLeftSplit1" data-off-canvas>
< button class = "close-button" aria-label = "Close menu"
type = "button" data-close>
< span aria-hidden = "true" >
×
</ span >
</ button >
< ul class = "menu vertical" >
< li >
< a href = "#" >One</ a >
</ li >
< li >
< a href = "#" >Two</ a >
</ li >
< li >
< a href = "#" >Three</ a >
</ li >
</ ul >
</ div >
< div class = "off-canvas-content"
style = "min-height:300px;" data-off-canvas-content>
</ div >
</ div >
</ div >
< div class = "cell small-6" >
< div class = "off-canvas-wrapper" >
< div class = "off-canvas-absolute position-right"
id = "offCanvasRightSplit2" data-off-canvas>
< button class = "close-button" aria-label = "Close menu"
type = "button" data-close>
< span aria-hidden = "true" >
×
</ span >
</ button >
< ul class = "menu vertical" >
< li >
< a href = "#" >Four</ a >
</ li >
< li >
< a href = "#" >Five</ a >
</ li >
< li >
< a href = "#" >Six</ a >
</ li >
</ ul >
</ div >
< div class = "off-canvas-content"
style = "min-height:300px;" data-off-canvas-content>
</ div >
</ div >
</ div >
</ div >
< script >
$(document).foundation();
</ script >
</ body >
</ html >
|
SASS Code:
$titlebar-background: green; .title-bar { background-color:$titlebar-background; }
Compiled CSS Code:
.title-bar { background-color: green; }
Output:
Reference: https://get.foundation/sites/docs/off-canvas.html