From 10aa981b73328d8628c73b7c22cfc00673252f48 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Tue, 16 May 2017 10:40:18 -0700 Subject: [PATCH] adds video and codepen for offcanvas --- docs/pages/dropdown-menu.md | 2 +- docs/pages/off-canvas.md | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md index 6c1d98f89..199af69ed 100644 --- a/docs/pages/dropdown-menu.md +++ b/docs/pages/dropdown-menu.md @@ -1,7 +1,7 @@ --- title: Dropdown Menu description: Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin. -video: '0F68zptD_nQ' +video: 'qDybCaxK3bA' sass: scss/components/_dropdown-menu.scss js: js/foundation.dropdownMenu.js --- diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md index 0c855ec57..261fbef36 100644 --- a/docs/pages/off-canvas.md +++ b/docs/pages/off-canvas.md @@ -34,6 +34,10 @@ The Off-canvas container also needs a positioning class to determine which side - `.position-top` - `.position-bottom` +

+ Watch this part in video +

+ Also be sure the off-canvas panel has a unique ID so it can be targeted by the click trigger. Example: @@ -54,6 +58,10 @@ Along with the Off-canvas container, the main content of your page will be house So putting it all together: +

+

+

+ ```html

@@ -67,7 +75,7 @@ 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. +You can add an optional wrapper 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 @@ -87,6 +95,10 @@ Simply add a container with the class `.off-canvas-wrapper`. 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. +

+

+

+ ```html_example ``` @@ -95,6 +107,10 @@ To create a click trigger that opens the panel, add the attribute `data-open` or Foundation's Close component can be used inside the off-canvas to close it. +

+

+

+ ```html