From: zurbchris Date: Wed, 25 Nov 2015 00:34:48 +0000 (-0800) Subject: adds sticky magellan example to docs page X-Git-Tag: v6.0.4~8 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=61d86b49c7a9c4d416b6fea4c291beb5db24bbbb;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds sticky magellan example to docs page --- diff --git a/docs/assets/js/docs.examples.js b/docs/assets/js/docs.examples.js index f12ee7165..7469a32e7 100644 --- a/docs/assets/js/docs.examples.js +++ b/docs/assets/js/docs.examples.js @@ -19,5 +19,11 @@ $('.docs-transitions').change(function() { $transitionDemo.show(); }); }); +var stickyMag = $('#sticky-magellan'); +stickyMag.on('sticky.zf.stuckto:top', function(){ + stickyMag.find('nav').addClass('stuck-mag'); +}).on('sticky.zf.unstuckfrom:top', function(e){ + stickyMag.find('nav').removeClass('stuck-mag'); +}); }(); diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index ed0573da0..779e4a6fb 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -31,6 +31,12 @@ ul:first-child { float: left; } ul:last-child { float: right; } } +.sticky-mag { + &.stuck-mag { + background-color: white; + border-bottom: 2px solid #121212; + } +} // .docs-component { // .callout { diff --git a/docs/pages/magellan.md b/docs/pages/magellan.md index 747261414..0512a27ec 100644 --- a/docs/pages/magellan.md +++ b/docs/pages/magellan.md @@ -5,15 +5,17 @@ js: js/foundation.magellan.js tags: - navigation --- - - +
+ +
## Setup @@ -34,14 +36,30 @@ You can use Magellan with any navigation element, like our [Menu](menu.html) or ## Sticky Navigation -You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar. +You can use Magellan with our Sticky plugin to create a persistent navigation header or sidebar. The first example is a simplified version of the table of contents on the right side of this page, the second is the menu bar floating at the top of the page. ```html -
- + + + + +
+
```