Fondation Magellan (Magellan) Navigation
Comment créer une navigation Magellan
Magellan Navigation est un indice de navigation est créé comme suit:
Exemples
<Dl class = "sous-nav ">
<Dd data-magellan arrivée = "page1"> <a href = "# page1"> Page 1 </ a> </ dd>
<Dd data-magellan arrivée = "page2"> <a href = "# page2"> Page 2 </ a> </ dd>
</ Dl>
</ Div>
<H3 données magellan-destination = "page1"> Page1 </ h3>
Nom <A = "page1"> </ a>
...
<H3 données magellan-destination = "page2"> Page2 </ h3>
Nom <A = "page2"> </ a>
...
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Des exemples d'analyses
Sur l'élément <div> pour ajouter des data-magellan-expedition="fixed" " propriété pour créer Magellan Navigation.
Ensuite <dd> ou <li> Ajoutez l' data-magellan-arrival=" value " " attribut, et ajouter un lien vers la valeur d'attribut (page1).
Utilisation de data-magellan-destination="value" " attribut pour contrôler la cible de navigation Magellan, suivi par les <a> éléments ajouter name=" value " attribut. Deux valeur de la propriété doit être data-magellan-arrival l' data-magellan-arrival des valeurs cohérentes (de page1).
Enfin, la Fondation d'initialisation JS, la navigation de l'utilisateur tout en faisant défiler la page basculera automatiquement en fonction du contenu affiché.
tête Magellan Navigation Toolbar
tête Magellan Navigation Toolbar en utilisant des exemples:
Exemples
<Nav class = "top-bar " data-topbar>
...
<Section class = "top-bar -section">
<Class Ul = "left">
<Li données magellan arrivée = "page1"> <a href = "# page1"> Page 1 </ a> </ li>
<Li données magellan arrivée = "page2"> <a href = "# page2"> Page 2 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
</ Div>
<H3 données magellan-destination = "page1"> Page1 </ h3>
Nom <A = "page1"> </ a>
...
<H3 données magellan-destination = "page2"> Page2 </ h3>
Nom <A = "page2"> </ a>
...
Essayez »
Magellan Navigation Rembourrage
Par défaut, la navigation Magellan <div> élément a un rembourrage de 10px. CSS peut être utilisé pour le supprimer:
options de navigation Magellan
Utilisation de données-options modifier les attributs des paramètres de navigation Magellan, tels que <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| nom | type | Par défaut | description | Exemples |
|---|---|---|---|---|
| active_class | string | actif | Classe spécifie le lien d'activation | essayer |
| seuil | nombre | 0 | Spécifiez à quel moment la navigation a besoin d'une position fixe. Sera calculé selon la barre de défilement, la valeur par défaut est 0 (auto). | essayer |
| destination_threshold | nombre | 20 | La valeur de consigne est réglé pour afficher la valeur des liens de navigation pour naviguer dans le haut de la liste est (fond bleu) actif quand. | essayer |
| fixed_top | nombre | 0 | Indique les valeurs de pixel de la tête de la barre de navigation | essayer |