]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 8ce9163)
adds video and codepen for offcanvas
authorRafiBomb <rafi@zurb.com>
Tue, 16 May 2017 17:40:18 +0000 (10:40 -0700)
committerRafiBomb <rafi@zurb.com>
Tue, 16 May 2017 17:40:18 +0000 (10:40 -0700)
docs/pages/dropdown-menu.md patch | blob | blame | history
docs/pages/off-canvas.md patch | blob | blame | history

diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index 6c1d98f89f86ec2e655b949faa120b04116337e8..199af69ed579d37b482fcb0200469e682a7ea7fd 100644 (file)
--- 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 0c855ec57d66d9e15746eefde90171583df4c6fd..261fbef36ee5b0d0e86695c2ee83b3a63a73477e 100644 (file)
--- 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`
 
+<p>
+  <a class="" data-open-video="2:00"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+</p>
+
 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:
 
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/ZKjXvQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
 <body>
   <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
@@ -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.
 
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/ZKjXvQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html_example
 <button type="button" class="button" data-toggle="offCanvasLeft">Open Menu</button>
 ```
@@ -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.
 
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/QvBQjo?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
 <button class="close-button" aria-label="Close menu" type="button" data-close>
   <span aria-hidden="true">&times;</span>
Mirror of https://github.com/foundation/foundation-sites.git