財団マゼラン（マゼラン）ナビゲーション
マゼランナビゲーションを作成する方法
マゼランナビゲーションは次のようにナビゲーションインデックスが作成されます：
例
<DIVデータ-マゼラン-遠征= "固定">
<のDIクラス= "サブNAV ">
<DDデータ・マゼラン到着= "ページ1"> <aのHREF = "# page1">ページ1 </ A> </ DD>
<DDデータ・マゼラン到着= "ページ2"> <aのHREF = "# page2">ページ2 </ A> </ DD>
</ DL>
</ DIV>
<H3データマゼラン先= "ページ1">のPage1 </ H3>
<A名= "page1"> </ A>
...
<H3データマゼラン先= "ページ2">ページ2 </ H3>
<A名= "page2"> </ A>
...
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
<のDIクラス= "サブNAV ">
<DDデータ・マゼラン到着= "ページ1"> <aのHREF = "# page1">ページ1 </ A> </ DD>
<DDデータ・マゼラン到着= "ページ2"> <aのHREF = "# page2">ページ2 </ A> </ DD>
</ DL>
</ DIV>
<H3データマゼラン先= "ページ1">のPage1 </ H3>
<A名= "page1"> </ A>
...
<H3データマゼラン先= "ページ2">ページ2 </ H3>
<A名= "page2"> </ A>
...
<！ -初期財団JS - >
<スクリプト>
$（ドキュメント）.ready（関数（）{
$（ドキュメント）.foundation（）;
}）
</スクリプト>
»をお試しください
分析の例
<div>要素に追加するには、 data-magellan-expedition="fixed" "マゼランナビゲーションを作成するには、プロパティを。
そして、 <dd>または<li>追加data-magellan-arrival=" value " "属性を、属性値（ページ1）などのバックリンクを追加します。
使用するdata-magellan-destination="value" "が続くマゼランナビゲーション・ターゲット、制御するための属性を<a>追加要素name=" value "属性を。 プロパティの二つの値がでなければならないdata-magellan-arrival一貫した値（ページ1）。
最後に、初期化財団JS、ユーザーナビゲーションページをスクロールしながら、自動的に現在表示されている内容に基づいて切り替わります。
マゼランナビゲーションツールバーヘッド
例を使用してマゼランナビゲーションツールバーヘッド：
例
<DIVデータ-マゼラン-遠征= "固定">
<ナビゲーションクラス= "トップバー 「データtopbar>
...
<区間クラス= "トップバー -section">
<ULクラス = "左">
<李データマゼラン到着= "ページ1"> <aのHREF = "# page1">ページ1 </ A> </ LI>
<李データマゼラン到着= "ページ2"> <aのHREF = "# page2">ページ2 </ A> </ LI>
</ UL>
</部>
</ナビゲーション>
</ DIV>
<H3データマゼラン先= "ページ1">のPage1 </ H3>
<A名= "page1"> </ A>
...
<H3データマゼラン先= "ページ2">ページ2 </ H3>
<A名= "page2"> </ A>
...
<ナビゲーションクラス= "トップバー 「データtopbar>
...
<区間クラス= "トップバー -section">
<ULクラス = "左">
<李データマゼラン到着= "ページ1"> <aのHREF = "# page1">ページ1 </ A> </ LI>
<李データマゼラン到着= "ページ2"> <aのHREF = "# page2">ページ2 </ A> </ LI>
</ UL>
</部>
</ナビゲーション>
</ DIV>
<H3データマゼラン先= "ページ1">のPage1 </ H3>
<A名= "page1"> </ A>
...
<H3データマゼラン先= "ページ2">ページ2 </ H3>
<A名= "page2"> </ A>
...
»をお試しください
マゼランナビゲーションパディング
デフォルトでは、マゼランナビゲーション<div>要素は10pxのパディングを持っています。 CSSは、それを除去することができます。
マゼランのナビゲーションオプション
データ・オプションを使用することなど、マゼランナビゲーション設定の属性、変更<div data-magellan-expedition="fixed" data-options="destination_threshold:60">
| 名前 | タイプ | デフォルト | 説明 | 例 |
|---|---|---|---|---|
| active_class | 文字列 | アクティブ | クラスは、アクティベーションリンクを指定します | 試します |
| しきい値 | 数 | 0 | ナビゲーションが固定位置を必要とするもの時点で指定します。 デフォルトは0（自動）で、スクロールバーに応じて計算されます。 | 試します |
| destination_threshold | 数 | 20 | 設定値は、リストの上から移動するためのナビゲーションリンクの値を表示するように設定されていることと、アクティブ（ブルーバック）です。 | 試します |
| fixed_top | 数 | 0 | ナビゲーションバーヘッドからのピクセル値を指定します。 | 試します |