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