From 9f5f2e8feab58ed043768bf5b334cfe1271b800a Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Sun, 11 Dec 2016 20:55:52 +0000 Subject: [PATCH] Add some corrections to the off canvas docs and document some missing options. --- docs/pages/off-canvas.md | 127 +++++++++++++++++++++++++-------------- 1 file changed, 82 insertions(+), 45 deletions(-) diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md index e7fd00727..77b0e7121 100644 --- a/docs/pages/off-canvas.md +++ b/docs/pages/off-canvas.md @@ -15,7 +15,7 @@ flex: true ---
-

Good news! We've updated Off-canvas to offer more and better functionality. Another bonus is the markup is simplified. This new version applies to version 6.3+. We work hard to avoid breaking changes, so any markup updates are listed in the migration section of this page.

+

Good news! We've updated Off-canvas to offer more and better functionality. Another bonus is the markup is simplified. This new version applies to version 6.3+. We work hard to avoid breaking changes, so any markup updates are listed in the migration section of this page.

@@ -24,7 +24,7 @@ Foundation's Off-canvas is a well established mobile pattern for navigation that ## Setup -Setting up the Off-canvas only requires two elememts! To setup the Off-canvas create an off-canvas container with the class `.off-canvas` and the attribute `data-off-canvas`. This is the container that holds your Off-canvas content. +Setting up the Off-canvas only requires two elements! To setup the Off-canvas create an off-canvas container with the class `.off-canvas` and the attribute `data-off-canvas`. This is the container that holds your Off-canvas content. The Off-canvas container also needs a positioning class to determine which side of the viewport it opens from: @@ -33,23 +33,17 @@ The Off-canvas container also needs a positioning class to determine which side - `.position-top` - `.position-bottom` -You will also add an data attribute for the position so the JS can do it's magic: -- `data-position="left"` -- `data-position="right"` -- `data-position="top"` -- `data-position="bottom"` - -Last, make sure the off-canvas panel has a unique ID so it can be targeted. +Also be sure the off-canvas panel has a unique ID so it can be targeted by the click trigger. Example: ```html -
+
``` -Along with the Off-canvas container, the main content of your page will be housed in its own container with the class `.off-canvas-content` and attribute `data-off-canvas-content`. This is where your page content lives. A class of `.off-canvas-content` should be added to this container. +Along with the Off-canvas container, the main content of your page will be housed in its own container with the class `.off-canvas-content` and attribute `data-off-canvas-content`. This is where your page content lives. ```html
@@ -61,7 +55,7 @@ So putting it all together: ```html -
+
@@ -70,6 +64,24 @@ So putting it all together: ``` +### Wrapper + +You can add an optionalwrapper around off-canvas and the content. This hides the vertical (on top/bottom off-canvas) or horizontal (on left/right off-canvas) scrollbars the body will have. +Simply add a container with the class `.off-canvas-wrapper`. + +```html + +
+
+ +
+
+ +
+
+ +``` + ### Click Triggers To create a click trigger that opens the panel, add the attribute `data-open` or `data-toggle` to any element. That element will then open or toggle the panel when clicked on. The value of the data attribute should be the ID of the off-canvas. @@ -94,7 +106,7 @@ Here's a complete example that can be pasted into the `` tag of your page. ```html -
+
``` +--- + +## Off-canvas Position + +Foundation's Off-canvas is set to `position: fixed` by default using the `.off-canvas` class. This makes the off-canvas panel sit in relation to the viewport, and is the desired behavior for most users. However you can also set an off-canvas container to `position: absolute` by using the alternative class `.off-canvas-absolute`. Also be sure to use the `.off-canvas-wrapper` when using this method. + +```html_example + + + +
+
+
+
+ +
+
+

I have nothing to do with the off-canvas on the right!

+
+
+
+
+
+
+ +
+
+

Im a unique off-canvas container all on my own!

+
+
+
+
+``` --- ## Off-canvas Directions -Foundation's Off-canvas can open from any direction, left, tight, top, and bottom. +Foundation's Off-canvas can open from any direction, left, right, top, and bottom. The Off-canvas container requires a positioning class to determine which side of the viewport it opens from: @@ -132,12 +177,6 @@ The Off-canvas container requires a positioning class to determine which side of - `.position-top` - `.position-bottom` -You will also add an data attribute for the position so the JS can do it's magic: -- `data-position="left"` -- `data-position="right"` -- `data-position="top"` -- `data-position="bottom"` - ```html_example @@ -145,20 +184,22 @@ You will also add an data attribute for the position so the JS can do it's magic
-
- -
-
- -
-
- -
-
- -
-
- +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
``` @@ -175,8 +216,8 @@ A design can have multiple panels. Be sure that all panels come *before* the `.o ```html -
-
+
+
``` @@ -186,12 +227,13 @@ A design can have multiple panels. Be sure that all panels come *before* the `.o --- -## Off-canvas Behavior +## Off-canvas Transitions -You can switch the default behavior of the off-canvas from pushing the page over as it open to overlaping the page by adding the `.is-transition-overlap` to the `.off-canvas`. The default option is `.is-transition-push`. +You can switch the default transition of the off-canvas from pushing the page over as it open to overlapping the page by adding the `data-transition="overlap"` to the `.off-canvas`. +There are 2 available transitions: push (`data-transition="push"`) which is the default, and overlap (`data-transition="overlap"`). ```html -
+
``` @@ -199,7 +241,7 @@ You can switch the default behavior of the off-canvas from pushing the page over -
+
  • Foundation
  • Dot
    • @@ -222,11 +264,6 @@ The main content area (`.off-canvas-content`) will be padded to the left or righ

    The menu will be fixed-position by default, meaning it follows you as you scroll up and down. The menu also gets its own scroll bar if it's taller than the window. To disable these features, set the $offcanvas-fixed-reveal variable to false.

-You can also set the position on .off-canvas by attaching one of these classes: - -- `.is-overlay-absolute` -- `.is-overlay-fixed` -

The slide in/out of the plugin still works when these classes are active. If you use this feature on a larger screen, be sure to hide any click triggers on those larger breakpoints as well. Foundation's visibility classes can help you with that.

-- 2.47.2