Foundation Magellan


Foundation Magellan Navigation

How to create Magellan Navigation

Magellan Navigation is a navigation index. The creation method is as follows:

Example

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="height:1500px;padding:20px;">

<h2>Magellan</h2>
<h4 class="subheader">麦哲伦导航就是一个导航索引，位置是固定的，会根据用户滚动当前展示的内容自动切换导航栏上的导航项:</h4>
<hr>

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd>
    <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd>
  </dl>
</div>
<hr>

<div style="height:200px;background-color:#1abc9c;color:white;">
  <h3 data-magellan-destination="page1">页面 1</h3>
  <a name="page1"></a>
  <p>滚动屏幕，查看导航栏上的变化。</p>
</div>

<h3 data-magellan-destination="page2">页面 2</h3>
<a name="page2"></a>
<p>滚动屏幕，查看导航栏上的变化。并尝试向上滚动。</p>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

Instance analysis

Add the data-magellan-expedition="fixed" attribute on the <div> element to create Magellan navigation.

Then add data-magellan-arrival="value"# on <dd> or <li> ## attribute, followed by a link (page1) with the same value as the attribute.

Use the

data-magellan-destination="value" attribute to control the destination of Magellan navigation, followed by the <a> element adding name ="value" attribute. The values ​​of both properties must match the value of data-magellan-arrival (page1).

Finally, initialize Foundation JS, and the navigation will automatically switch based on the currently displayed content when the user scrolls the page.

Magellan Navigation Head Toolbar

Magellan Navigation Head Toolbar Example:

Example

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div data-magellan-expedition="fixed">
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- Collapsible Button on small screens: remove the .menu-icon class to get rid of icon. 
    Remove the "Menu" text if you only want to show the icon -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>
      <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>
    </ul>
  </section>
</nav>
</div>

<div style="padding:20px;height:1500px;">
  <h3>Magellan 头部导航实例</h3>
  <p>向下滚动页面查看效果。</p>

<div style="height:200px;background-color:#1abc9c;color:white;">
  <h3 data-magellan-destination="page1">Page1</h3>
  <a name="page1"></a>
  <p>滚动屏幕，查看导航栏上的变化。</p>
</div>

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
<p>滚动屏幕，查看导航栏上的变化。并尝试向上滚动。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»Click the "Run Instance" button to view the online instance

Magellan Navigation Padding

By default , the

<div> element of Magellan Navigation has a 10px padding. You can remove it using CSS:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

 <style>
  [data-magellan-expedition], [data-magellan-expedition-clone] {
      padding: 0;
  }
  </style>
</head>
<body>

<div data-magellan-expedition="fixed">
<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">WebSiteName</a></h1>
    </li>
    <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。 
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>
      <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>
    </ul>
  </section>
</nav>
</div>

<div style="padding:20px;height:1500px;">
  <h3>Magellan 头部导航实例</h3>
  <p>向下滚动页面查看效果。</p>

<div style="height:200px;background-color:#1abc9c;color:white;">
  <h3 data-magellan-destination="page1">Page1</h3>
  <a name="page1"></a>
  <p>滚动屏幕，查看导航栏上的变化。</p>
</div>

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
<p>滚动屏幕，查看导航栏上的变化。并尝试向上滚动。</p>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»Click the "Run Instance" button to view it online Example

Magellan Navigation Options

Use the data-options attribute to modify the settings of Magellan Navigation, for example<div data-magellan-expedition="fixed" data-options="destination_threshold:60 ">:

##NameTypeDefaultDescription Exampleactive_classstringactiveSpecify the class to activate the linkTry it outthresholdnumber0Specifies when the navigation needs to be fixed. The calculation will be scrolled according to the scroll bar. The default is 0 (auto). Try itdestination_thresholdnumber20Set this value to set the navigation link display The distance from the top of the navigation list when activated (blue background). Try itfixed_topnumber0Specifies the pixels of the navigation bar from the head ValueTry it


←
→