Fundacja Magellan (Magellan) nawigacja
Jak stworzyć nawigację Magellan
Magellan Navigation jest indeksem nawigacji jest tworzony w następujący sposób:
Przykłady
<Dl class = "sub-nav ">
<Dd danych Magellan przybyciem = "page1"> <a href = "# page1"> Page 1 </ a> </ dd>
<Dd danych Magellan przybyciem = "Strona2"> <a href = "# page2"> Page 2 </ a> </ dd>
</ Dl>
</ Div>
<H3 danych Magellan-destination = "page1"> Strona1 </ h3>
Nazwa <A = "page1"> </ a>
...
<H3 danych Magellan-destination = "Strona2"> STR.2 </ h3>
Nazwa <A = "page2"> </ a>
...
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Przykłady analityczne
Na elemencie <div>, aby dodać data-magellan-expedition="fixed" " Obiekt do tworzenia Magellan Navigation.
Wtedy <dd> lub <li> Dodanie data-magellan-arrival=" value " " atrybut i dodać z powrotem link jako wartość atrybutu (Strona1).
Korzystanie z data-magellan-destination="value" " atrybut kontrolować cel nawigacji Magellan, a następnie <a> elementów dodać name=" value " atrybut. Dwa wartość nieruchomości musi być data-magellan-arrival spójne wartości (Strona1).
Wreszcie, aktualnie wyświetlany Fundacja inicjalizacji JS, nawigacja użytkownika podczas przewijania strony zostanie automatycznie przełączony na podstawie zawartości.
Głowica Magellan Navigation Toolbar
Głowica Magellan Navigation Toolbar za pomocą przykładów:
Przykłady
<Nav class = "top-bar " danych topbar>
...
<Section class = "top-bar -section">
<Class Ul = "left">
<Li danych Magellan przybyciem = "page1"> <a href = "# page1"> Page 1 </ a> </ li>
<Li danych Magellan przybyciem = "Strona2"> <a href = "# page2"> Page 2 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
</ Div>
<H3 danych Magellan-destination = "page1"> Strona1 </ h3>
Nazwa <A = "page1"> </ a>
...
<H3 danych Magellan-destination = "Strona2"> STR.2 </ h3>
Nazwa <A = "page2"> </ a>
...
Spróbuj »
Magellan Navigation Dopełnienie
Domyślnie nawigacja Magellan <div> element ma dopełnienie 10px. CSS może być używany, aby go usunąć:
Opcje nawigacji Magellan
Wykorzystując dane-opcje modyfikowania atrybutów ustawieniach nawigacji Magellan, takich jak <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| nazwa | typ | Domyślnie | opis | Przykłady |
|---|---|---|---|---|
| active_class | sznur | aktywny | Klasa określa link aktywacyjny | próbować |
| próg | liczba | 0 | Określ, w jakim czasie nawigacji potrzebuje stałej pozycji. Zostanie obliczona zgodnie z paska przewijania, domyślnie jest 0 (auto). | próbować |
| destination_threshold | liczba | 20 | Ustawiona wartość jest ustawiona na wyświetlanie wartości linków nawigacyjnych, aby poruszać się z górnej części listy jest aktywny (niebieskie tło) kiedy. | próbować |
| fixed_top | liczba | 0 | Określa wartości pikseli z głowy pasku nawigacji | próbować |