Stiftung Magellan (Magellan) Navigation
Wie ein Magellan Navigation zu erstellen
Magellan Navigation ist ein Navigations Index erstellt wird, wie folgt:
Beispiele
<Dl class = "sub-nav ">
<Dd Daten-magellan-Ankunft = "Seite1"> <a href = "# page1"> Page 1 </ a> </ dd>
<Dd Daten-magellan-Ankunft = "page2"> <a href = "# page2"> Page 2 </ a> </ dd>
</ Dl>
</ Div>
<H3 Daten-magellan-destination = "Seite1"> Seite1 </ h3>
<A Name = "page1"> </ a>
...
<H3 Daten-magellan-destination = "page2"> Seite 2 </ h3>
<A Name = "page2"> </ a>
...
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Beispiele für analytische
Auf dem <div> Element hinzufügen data-magellan-expedition="fixed" " Eigenschaft Magellan Navigation zu erstellen.
Dann <dd> oder <li> Fügen Sie die data-magellan-arrival=" value " " Attribut, und fügen Sie einen Link zurück als Attributwert (Seite1).
Mit data-magellan-destination="value" " Attribut des Magellan Navigationsziel zu steuern, gefolgt von den <a> Elemente hinzufügen name=" value " Attribut. Zwei Wert der Immobilie muss data-magellan-arrival konsistente Werte (Seite1).
Schließlich JS die Initialisierung Foundation, Benutzerführung, während Scrollen der Seite wird automatisch auf den Inhalt basierten Schalter gerade angezeigt wird.
Magellan Navigation Toolbar Kopf
Magellan Navigation Toolbar Kopf Beispielen:
Beispiele
<Nav class = "top-bar " data-topbar>
...
<Section class = "top-bar -Abschnitt">
<Ul class = "left">
<Li Daten-magellan-Ankunft = "Seite1"> <a href = "# page1"> Page 1 </ a> </ li>
<Li Daten-magellan-Ankunft = "page2"> <a href = "# page2"> Page 2 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
</ Div>
<H3 Daten-magellan-destination = "Seite1"> Seite1 </ h3>
<A Name = "page1"> </ a>
...
<H3 Daten-magellan-destination = "page2"> Seite 2 </ h3>
<A Name = "page2"> </ a>
...
Versuchen »
Magellan Navigation Padding
Standardmäßig ist der Magellan Navigation <div> hat Element Polsterung von 10px. CSS kann verwendet werden, um es zu entfernen:
Magellan Navigationsoptionen
Mit den Daten-Optionen ändern , um die Attribute von Magellan Navigation Einstellungen, wie zB <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> - <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| Name | Typ | Default | Beschreibung | Beispiele |
|---|---|---|---|---|
| active_class | Schnur | aktiv | Klasse gibt den Aktivierungslink | versuchen |
| Schwelle | Anzahl | 0 | Geben Sie, zu welchem Zeitpunkt die Navigation eine feste Position benötigt. Wird nach der Bildlaufleiste berechnet werden, ist der Standardwert 0 (auto). | versuchen |
| destination_threshold | Anzahl | 20 | Der Sollwert eingestellt wird, um den Wert der Navigations-Links angezeigt werden von der Spitze der Liste zu navigieren ist aktiv (blauer Hintergrund), wenn. | versuchen |
| fixed_top | Anzahl | 0 | Gibt die Pixelwerte aus der Navigationsleiste Kopf | versuchen |