From: Kevin Ball <kmball11@gmail.com>
Date: Mon, 15 May 2017 20:51:41 +0000 (-0700)
Subject: Add vid links into navigation pieces
X-Git-Tag: v6.4.0-rc1~46^2~26^2~21
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6f12e347be3e7192b5d28893fcdc7e3f18887b49;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add vid links into navigation pieces
---

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index b6a687025..864fe5e1e 100644
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -12,11 +12,12 @@ Accordion menus follow the basic [Menu](menu.html) syntax of `<ul>`, `<li>`, and
 
 Any `<a>` will behave like a standard link. However, any `<a>` paired with a nested `<ul>` menu will then slide that sub-menu up and down when clicked on.
 
+<a class="" data-open-video="0:29"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+
 <div class="primary callout">
   <p>You can use the built-in <code>.nested</code> class to add an indent to a nested menu.</p>
 </div>
 
-<a class="" data-open-video="12: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>
 <div class="primary callout">
   <p>To have a sub-menu already open when the page loads, add the class <code>.is-active</code> to that sub-menu.</p>
 </div>
diff --git a/docs/pages/breadcrumbs.md b/docs/pages/breadcrumbs.md
index 48e2dab42..3577b0880 100644
--- a/docs/pages/breadcrumbs.md
+++ b/docs/pages/breadcrumbs.md
@@ -9,7 +9,7 @@ To make a set of breadcrumb links, just add the class `.breadcrumbs` to a `<ul>`
 
 To mark a disabled item, add the class `.disabled` to the `<li>`, and just use plain text instead of a link.
 
-<a class="" data-open-video="12: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>
+<a class="" data-open-video="2:05"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="warning callout">
   <p>We use a CSS <code>::after</code> element containing a slash character to create the separator between items. Some screen readers will read this character out loud&mdash;if this is an issue, you can use a background image or a separate element with <code>aria-hidden="true"</code> to create the separator instead.</p>
diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 84fdb1ff9..6a5093ea1 100644
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -15,7 +15,7 @@ To create sub-menus, place a `<ul>` *next to* an `<a>`. Clicking that `<a>` will
 Any `<a>` without a submenu will function like a normal link.
 
 <p>
-  <a class="" data-open-video="12: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>
+  <a class="" data-open-video="0:30"><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>
 
 <div class="docs-codepen-container">
@@ -84,12 +84,14 @@ Any `<a>` without a submenu will function like a normal link.
 
 ## autoHeight
 
-<a class="" data-open-video="12: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>
 <div class="secondary callout">
   <p>If you like to set the height to auto you can also set the autoHeight and animateHeight params</p>
   <button class="button expanded" onclick="$('#m3').foundation('destroy');if($('#m3').data('autoHeight')){$('#m3').data('autoHeight',false);$(this).html('autoHeight is Off');}else{$('#m3').data('autoHeight',true);$(this).html('autoHeight is On');}new Foundation.Drilldown($('#m3'));return false;">autoHeight is On</button>
 </div>
 
+<p>
+<a class="" data-open-video="3:27"><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>
 
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/mmKyrw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/codepen-button.svg" class="" height="" width="" alt="edit on codepen button"></a>
@@ -166,8 +168,6 @@ Any `<a>` without a submenu will function like a normal link.
 
 ## ScrollTop Drilldown
 
-<a class="" data-open-video="12: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>
-
 <div class="callout">Scroll to the top of the menu when selecting a submenu/navigating back using the menu back button. Can be useful with a longer menu to provide a better user experience.</div>
 
 
diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index 4640151c2..35a56e45f 100644
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -21,7 +21,7 @@ Dropdown menus build on the [Menu](menu.html) component's syntax. Add the class
 
 To create dropdown menus, nest a new `<ul>` inside an `<li>`. You can nest further to create more levels of dropdowns.
 
-<a class="" data-open-video="12: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>
+<a class="" data-open-video="0:33"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="primary callout">
   <p>Note that the <code>&lt;ul&gt;</code> goes <em>after</em> the <code>&lt;a&gt;</code>, and not inside of it.</p>
@@ -91,7 +91,6 @@ To create dropdown menus, nest a new `<ul>` inside an `<li>`. You can nest furth
 
 Add the `.vertical` class to the top-level menu to make it vertical. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.
 
-<a class="" data-open-video="12: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>
 <div class="primary callout">
   <p>Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a <code>max-width</code> on the menu.</p>
 </div>
diff --git a/docs/pages/magellan.md b/docs/pages/magellan.md
index f215cf380..8e87a794f 100644
--- a/docs/pages/magellan.md
+++ b/docs/pages/magellan.md
@@ -7,26 +7,12 @@ tags:
   - navigation
 ---
 
-<div data-sticky-container>
-  <div class="sticky" id="sticky-magellan" style="width:100%;" data-sticky data-margin-top="0" data-margin-bottom="0" data-top-anchor="setup" data-btm-anchor="destroy:bottom" data-sticky-on="small">
-    <nav data-magellan class="sticky-mag" data-bar-offset="25">
-      <ul class="horizontal menu expanded">
-        <li><a href="#setup">Setup</a></li>
-        <li><a href="#sticky-navigation">Sticky Navigation</a></li>
-        <li><a href="#javascript-reference">JavaScript Reference</a></li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
-<br>
-
 ## Setup
 
 You can use Magellan with any navigation element, like our [Menu](menu.html) or your own custom component. Just add the attribute `data-magellan` to the container, and links to specific sections of your page. Each section needs a unique ID.
 
 <p>
-  <a class="" data-open-video="12: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>
+  <a class="" data-open-video="0:42"><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>
 
 <div class="docs-codepen-container">
@@ -55,10 +41,6 @@ You can use Magellan with any navigation element, like our [Menu](menu.html) or
 
 You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar.
 
-<p>
-  <a class="" data-open-video="12: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>
-
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/gWKLqV?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/codepen-button.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
@@ -104,18 +86,3 @@ This below example is a simplified version of the table of contents on the right
 </div>
 ```
 
-This below example is the menu bar floating at the top of the page.
-
-```html
-<div data-sticky-container>
-  <div class="sticky" id="example" data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0" data-top-anchor="topAnchorExample" data-btm-anchor="bottomOfContentId:bottom">
-    <nav data-magellan>
-      <ul class="horizontal menu expanded">
-      <li><a href="#first">First Arrival</a></li>
-      <li><a href="#second">Second Arrival</a></li>
-      <li><a href="#third">Third Arrival</a></li>
-      </ul>
-    </nav>
-  </div>
-</div>
-```
diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md
index af034d694..bd1cf5838 100644
--- a/docs/pages/pagination.md
+++ b/docs/pages/pagination.md
@@ -14,7 +14,7 @@ Note that the container has the attributes `role="navigation"` and `aria-label="
 Extra screen reader-only text should also be added to a pagination element. In the below example, users reading the page will just see "Next" and "Previous", but screen readers will read it as "Next page" and "Previous page". Additionally, the text for the current page will read as "You're on page one".
 
 <p>
-  <a class="" data-open-video="12: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>
+  <a class="" data-open-video="1:47"><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>
 
 <div class="docs-codepen-container">
@@ -41,9 +41,6 @@ Extra screen reader-only text should also be added to a pagination element. In t
 
 The items in a pagination list are `display: inline-block`, which makes centering them easy. Use our built-in `.text-center` class, or add `text-align: center` in your CSS.
 
-<p>
-  <a class="" data-open-video="12: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>
 
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/dWKYZb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/codepen-button.svg" class="" height="" width="" alt="edit on codepen button"></a>
diff --git a/docs/pages/responsive-navigation.md b/docs/pages/responsive-navigation.md
index 57427710d..d5dfa44f4 100644
--- a/docs/pages/responsive-navigation.md
+++ b/docs/pages/responsive-navigation.md
@@ -12,7 +12,7 @@ js:
 The Menu has some responsive CSS classes built in, which allow you to re-orient a menu on different screen sizes.
 
 <p>
-  <a class="" data-open-video="12: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>
+  <a class="" data-open-video="0:58"><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>
 
 <div class="docs-codepen-container">
@@ -37,7 +37,7 @@ With our responsive Menu plugin, you can apply a default pattern to a Menu, and
 For example, a drilldown menu works well on mobile, but on larger screens, you may want to convert that same menu into a dropdown. Here's an example that does just that:
 
 <p>
-  <a class="" data-open-video="12: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>
+  <a class="" data-open-video="2:35"><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>
 
 <div class="docs-codepen-container">
@@ -89,7 +89,7 @@ To set it up, first give your menu a unique ID. (You don't even need to use Menu
 
 By default, the title bar will be visible on small screens, and the Menu hides. At the medium breakpoint, the title bar disappears, and the menu is always visible. This breakpoint can be changed with the `data-hide-for` attribute in HTML, or the `hideFor` setting in JavaScript.
 
-<a class="" data-open-video="12: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>
+<a class="" data-open-video="5:05"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="primary callout show-for-medium">
   <p>Scale your browser down to see the toggle happen.</p>
@@ -136,7 +136,6 @@ By default, the title bar will be visible on small screens, and the Menu hides.
 
 To use animations from the Motion UI library, include the <code>data-animation="someAnimationIn someAnimationOut"</code> attribute.
 
-<a class="" data-open-video="12: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>
 
 <div class="primary callout show-for-medium">
   <p>Scale your browser down to see the toggle happen.</p>
diff --git a/docs/pages/top-bar.md b/docs/pages/top-bar.md
index 2e408f759..fb3d8fddd 100644
--- a/docs/pages/top-bar.md
+++ b/docs/pages/top-bar.md
@@ -17,7 +17,7 @@ A top bar (`.top-bar`) can have two sections: a left-hand section (`.top-bar-lef
 In the below example, our top bar includes a [dropdown menu](dropdown-menu.html), along with a text input field and action button. The dropdown menu inherits the background color of the top bar. If you're using the Sass version of Foundation, you can change this with the `$topbar-submenu-background` variable.
 
 <p>
-  <a class="" data-open-video="12: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>
+  <a class="" data-open-video="0:58"><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>
 
 <div class="docs-codepen-container">
@@ -68,10 +68,6 @@ You can further divide a top bar into a title area and content area. Use the `.t
 
 In the below example, we've combined the above pattern with the Responsive Toggler plugin, creating a responsive top bar with a toggle click trigger on mobile.
 
-<p>
-  <a class="" data-open-video="12: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>
-
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/LymroM?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/codepen-button.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
@@ -115,10 +111,6 @@ In the below example, we've combined the above pattern with the Responsive Toggl
 
 By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class `.stacked-for-medium` or `.stacked-for-large`.
 
-<p>
-  <a class="" data-open-video="12: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>
-
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/XRYbZa?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/codepen-button.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>