Fondazione Magellan (Magellano) navigazione
Come creare una navigazione Magellan
Magellan Navigation è un indice di navigazione viene creato come segue:
Esempi
<Dl class = "sub-nav ">
<Dd dati-Magellan-arrivo = "page1"> <a href = "# page1"> Pagina 1 </ a> </ dd>
<Dd dati-Magellan-arrivo = "Pagina2"> <a href = "# page2"> Page 2 </ a> </ dd>
</ Dl>
</ Div>
<H3-Magellan-destinazione dei dati = "page1"> Pagina1 </ h3>
Nome <A = "page1"> </ a>
...
<H3-Magellan-destinazione dei dati = "Pagina2"> PAGE2 </ h3>
Nome <A = "page2"> </ a>
...
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Esempi di analitica
Sul elemento <div> per aggiungere data-magellan-expedition="fixed" " di proprietà per creare Magellan Navigation.
Poi <dd> o <li> Aggiungi il data-magellan-arrival=" value " " attributo e aggiungere un link di ritorno come il valore dell'attributo (Pagina1).
Usando data-magellan-destination="value" " di attributo per controllare la destinazione di navigazione Magellan, seguito dagli <a> elementi di aggiungere name=" value " attributo. Due valore della proprietà deve essere data-magellan-arrival valori coerenti (Pagina1).
Infine, la Fondazione di inizializzazione JS, la navigazione dell'utente durante lo scorrimento della pagina passa automaticamente in base al contenuto correntemente visualizzata.
testa Magellan Navigation Toolbar
testa Magellan Navigation Toolbar utilizzando esempi:
Esempi
<Nav class = "top-bar " data-topbar>
...
<Sezione class = "top-bar -sezione">
<Ul class = "left">
<Li dati-Magellan-arrivo = "page1"> <a href = "# page1"> Pagina 1 </ a> </ li>
<Li dati-Magellan-arrivo = "Pagina2"> <a href = "# page2"> Page 2 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
</ Div>
<H3-Magellan-destinazione dei dati = "page1"> Pagina1 </ h3>
Nome <A = "page1"> </ a>
...
<H3-Magellan-destinazione dei dati = "Pagina2"> PAGE2 </ h3>
Nome <A = "page2"> </ a>
...
Prova »
Magellan Navigation Imbottitura
Per impostazione predefinita, la navigazione Magellan <div> elemento ha padding di 10px. CSS può essere usato per rimuoverlo:
opzioni di navigazione Magellan
Utilizzando i dati-options modificare gli attributi di impostazioni di navigazione Magellan, come ad esempio <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| nome | tipo | difetto | descrizione | Esempi |
|---|---|---|---|---|
| active_class | stringa | attivo | Classe specifica il link di attivazione | provare |
| soglia | numero | 0 | Specificare a che ora la navigazione ha bisogno di una posizione fissa. Sarà calcolato in base alla barra di scorrimento, il valore predefinito è 0 (auto). | provare |
| destination_threshold | numero | 20 | Il valore impostato è impostato per visualizzare il valore dei link di navigazione per spostarsi dalla parte superiore della lista è (sfondo blu) attivo quando. | provare |
| fixed_top | numero | 0 | Specifica i valori dei pixel dalla testa barra di navigazione | provare |