--- /dev/null
+<!doctype html>\r
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->\r
+<html class="no-js" lang="en" dir="ltr">\r
+ <head>\r
+ <meta charset="utf-8">\r
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">\r
+ <title>Magellan:Active Item</title>\r
+ <link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />\r
+ <link href="../assets/css/foundation.css" rel="stylesheet" />\r
+ <style type="text/css">\r
+ \r
+ section{height:60em;}\r
+ nav{height:4em;}\r
+ .sticky{width: 100%;}\r
+ .highlight{background:#A1D4E9;}\r
+ .top-bar, .top-bar ul, .dark{background:#3a3a3a; color:#A1D4E9 }\r
+ .top-bar a{color: #A1D4E9;}\r
+ .active{background:#A1D4E9;color:white!important;}\r
+ .well{padding:3rem;}\r
+\r
+ </style>\r
+ </head>\r
+\r
+<body>\r
+ <header>\r
+ <nav data-sticky-container>\r
+ <div class="sticky is-stuck is-at-top" data-sticky data-sticky-on="small" data-margin-top="0" data-margin-bottom="0" data-top-anchor="top">\r
+ <div class="top-bar">\r
+ <ul data-magellan data-bar-offset="25" data-deep-linking="true" class="small-horizontal menu">\r
+ <li><a href="#one">one</a></li>\r
+ <li><a href="#two">two</a></li>\r
+ <li><a href="#three">three</a></li>\r
+ <li><a href="#four">four</a></li>\r
+ <li><a href="#five">five</a></li>\r
+ <li><a href="#six">six</a></li>\r
+ </ul>\r
+ </div>\r
+ </div>\r
+ </nav>\r
+ \r
+ <section id="heading">\r
+ <h1 class="text-center well">Pre-anchor Section</h1>\r
+ <div class="well">\r
+ <p>Incorrect: Navigation item one is active before first anchor point at section One.</p>\r
+ Correct: \r
+ <ul>\r
+ <li>Navigation items should be inactive until first anchor point.</li>\r
+ <li>URL should contain no hash</li>\r
+ </ul>\r
+ </div>\r
+ </section>\r
+ \r
+ </header>\r
+ <main>\r
+ \r
+ <section id="one" class="highlight" data-magellan-target="one">\r
+ <h1 class="text-center well">Section One</h1>\r
+ <div class="well">\r
+ <p>First anchor point. Navigation item one should be active only in this section.</p>\r
+ <p>Location hash should be #one with deep linking set to true</p>\r
+ </div>\r
+ </section>\r
+ <section id="two" data-magellan-target="two">\r
+ <h1 class="text-center well">Section Two</h1>\r
+ <div class="well">\r
+ <p>Second anchor point. Navigation item two should be active only in this section.</p>\r
+ <p>Location hash should be #two with deep linking set to true</p>\r
+ </div>\r
+ </section>\r
+ <section id="three" class="highlight" data-magellan-target="three">\r
+ <h1 class="text-center well">Section Three</h1>\r
+ <div class="well">\r
+ <p>Third anchor point. Navigation item three should be active only in this section.</p>\r
+ <p>Location hash should be #three with deep linking set to true</p>\r
+ </div>\r
+ </section>\r
+ <section id="four" data-magellan-target="four">\r
+ <h1 class="text-center well">Section Four</h1>\r
+ </section>\r
+ <section id="five" class="highlight" data-magellan-target="five">\r
+ <h1 class="text-center well">Section Five</h1>\r
+ </section>\r
+ </section>\r
+ <section id="six" class="dark" data-magellan-target="six">\r
+ <h1 class="text-center well">Section Six</h1>\r
+ </section>\r
+\r
+ \r
+ </main>\r
+\r
+ <script src="../assets/js/vendor.js"></script>\r
+ <script src="../assets/js/foundation.js"></script>\r
+ <script>\r
+ $(document).foundation();\r
+ </script>\r
+ </body>\r
+</html>
\ No newline at end of file
projects / thirdparty / foundation / foundation-sites.git / commitdiff
