</head>
<body>
- <div class="off-canvas-wrapper" data-off-canvas-wrapper>
+ <div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
{{> off-canvi}}
- <div class="main-content" data-off-canvas-content>
+ <div class="off-canvas-content" data-off-canvas-content>
<div class="menu-group docs-topbar">
<ul class="menu">
<li class="docs-topbar-title"><a href="#" data-open="body"><img src="assets/img/zurb-logo.svg" alt="ZURB"> Foundation</a></li>
{{> footer}}
</div>
- </div>
+ </div></div>
<script src="assets/js/vendor.js"></script>
<script src="assets/js/foundation.js"></script>
</ul>
</div>
-<div class="primary callout">
- <p>Accordion menus have no custom CSS—you just need the base Menu CSS.</p>
-</div>
-
```html_example
<ul class="vertical menu" data-accordion-menu>
<li>
## Setup
-To start, create a wrapper to house your entire page. It has the class `.off-canvas-wrapper` and the attribute `data-off-canvas-wrapper`.
+To start, create two wrappers to house the page. These are necessary to prevent the off-canvas menus from being visible when they're not open. They also smooth out cross-browser bugs.
+- The outer wrapper has the class `.off-canvas-wrapper`.
+- The inner wrapper has the class `.off-canvas-wrapper-inner` and the attribute `data-off-canvas-wrapper`.
```html
<body>
- <div class="off-canvas-wrapper" data-off-canvas-wrapper></div>
+ <div class="off-canvas-wrapper">
+ <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper></div>
+ </div>
</body>
```
-Inside this wrapper, create an off-canvas menu with the class `.off-canvas` and the attribute `data-off-canvas`. The menu also needs a positioning class, which can be `.position-left` or `.position-right`. Make sure the off-cavnas also has a unique ID so it can be targeted.
+Inside these wrapper, create an off-canvas menu with the class `.off-canvas` and the attribute `data-off-canvas`. The menu also needs a positioning class, which can be `.position-left` or `.position-right`. Lastly, make sure the off-cavnas has a unique ID so it can be targeted.
-Along with the menu, the main content of your page will be housed in its own container with the class `.main-content` and attribute `data-off-canvas`.
+Along with the menu, the main content of your page will be housed in its own container with the class `.off-canvas-content` and attribute `data-off-canvas`.
```html
<body>
- <div class="off-canvas-wrapper" data-off-canvas-wrapper>
- <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-position="left"></div>
- <div class="main-content" data-off-canvas-content></div>
+ <div class="off-canvas-wrapper">
+ <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
+ <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-position="left"></div>
+ <div class="off-canvas-content" data-off-canvas-content></div>
+ </div>
</div>
</body>
```
```html
<body>
- <div class="off-canvas-wrapper" data-off-canvas-wrapper>
- <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
- <div class="off-canvas position-right" id="offCanvas" data-off-canvas></div>
- <div class="main-content" data-off-canvas-content></div>
+ <div class="off-canvas-wrapper">
+ <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
+ <div class="off-canvas position-left" id="offCanvas" data-off-canvas></div>
+ <div class="off-canvas position-right" id="offCanvas" data-off-canvas></div>
+ <div class="main-content" data-off-canvas-content></div>
+ </div>
</div>
</body>
```
+////
+/// @group accordion-menu
+////
+
+/// Sets if accordion menus have the default arrow styles.
+/// @type Boolean
+$accordionmenu-arrows: true;
+
+@mixin foundation-accordion-menu {
+ [data-accordion-menu] {
+ @if $accordionmenu-arrows {
+ .has-submenu > a {
+ position: relative;
+
+ &::after {
+ @include css-triangle(6px, $primary-color, down);
+ position: absolute;
+ top: 50%;
+ margin-top: -6px;
+ right: 1rem;
+ }
+ }
+ }
+ }
+}
$offcanvas-exit-background: rgba($white, 0.25);
/// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
-$maincontent-class: 'main-content';
+$maincontent-class: 'off-canvas-content';
/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
/// @type Shadow
height: 100%;
}
- html {
+ .off-canvas-wrapper {
+ width: 100%;
+ overflow-x: hidden;
position: relative;
- overflow: hidden;
backface-visibility: hidden;
- width: 100%;
+ -webkit-overflow-scrolling: touch;
}
- body {
- width: 100%;
- overflow-x: hidden;
+ .off-canvas-wrapper-inner {
+ @include clearfix;
position: relative;
- backface-visibility: hidden;
+ width: 100%;
+ transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
@if $maincontent-prevent-scroll == true {
&.is-off-canvas-open {
}
}
- .off-canvas-wrapper {
- position: relative;
- width: 100%;
+ // Container for page content
+ .off-canvas-content {
+ min-height: 100%;
+ background: $body-background;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+ backface-visibility: hidden;
+ z-index: 1;
+
+ @if hasvalue($maincontent-shadow) {
+ box-shadow: $maincontent-shadow;
+ }
}
// Click-to-exit overlay (generated by JavaScript)
}
}
-/// Adds styles for the main content wrapper that sits next to the off-canvas.
-@mixin main-content {
- min-height: 100%;
- background: $body-background;
- transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
- backface-visibility: hidden;
- z-index: 1;
-
- @if hasvalue($maincontent-shadow) {
- box-shadow: $maincontent-shadow;
- }
-}
-
/// Adds styles that reveal an off-canvas menu.
/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
@mixin off-canvas-reveal(
&.position-right { @include off-canvas-position(right); }
}
- // Container for page content
- .main-content {
- @include main-content;
- }
-
// Reveal off-canvas menu on larger screens
@each $name, $value in $breakpoint-classes {
@if $name != small {
projects / thirdparty / foundation / foundation-sites.git / commitdiff
