Yayasan Magellan
Navigasi Yayasan Magellan
Cara mencipta Navigasi Magellan
Navigasi Magellan ialah indeks navigasi Kaedah penciptaan adalah seperti berikut:
Contoh
<!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>Jalankan instance»
Klik butang "Run instance" untuk melihat instance dalam talian
Analisis instance
Tambahkan atribut data-magellan-expedition="fixed" pada elemen <div>
Kemudian tambahkan atribut <dd> pada <li> atau data-magellan-arrival="value", dan kemudian tambahkan pautan (halaman1) dengan nilai yang sama dengan atribut.
Gunakan atribut data-magellan-destination="value" untuk mengawal sasaran navigasi Magellan dan tambah atribut <a> pada elemen name="value" berikut. Nilai kedua-dua sifat mesti sepadan dengan nilai data-magellan-arrival (halaman1).
Akhir sekali, mulakan Foundation JS, dan navigasi akan bertukar secara automatik berdasarkan kandungan yang sedang dipaparkan apabila pengguna menatal halaman.
Bar Alat Pengepala Navigasi Magellan
Bar Alat Pengepala Navigasi Magellan Contoh:
Magellan Navigation Padding
Secara lalai , Magellan Navigation's <div> elemen mempunyai padding 10px. Anda boleh mengalih keluarnya menggunakan 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>
</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»
Klik butang "Run Instance" untuk lihat dalam talian Contoh
Pilihan Navigasi Magellan
Gunakan atribut pilihan data untuk mengubah suai tetapan Navigasi Magellan, contohnya <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:
| 名称 | 类型 | 默认 | 描述 | 实例 |
|---|---|---|---|---|
| active_class | string | active | 指定激活链接的类 | 尝试一下 |
| threshold | number | 0 | 指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。 | 尝试一下 |
| destination_threshold | number | 20 | 设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。 | 尝试一下 |
| fixed_top | number | 0 | 指定了导航条距离头部的像素值 | 尝试一下 |
