Navigation Magellan Foundation

Comment créer une navigation Magellan

La navigation Magellan est un index de navigation, créé comme suit :

Exemple

<div data-magellan-expedition="fixed">
  <dl class="sub-nav">
    <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd>
    <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd>
  </dl>
</div>

<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>
...

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
...

<!-- Initialiser Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Essayez-le vous-même »

Analyse de l'exemple

Ajoutez à l'élément <div>data-magellan-expedition="fixed"les attributs pour créer la navigation Magellan.

puis dans<dd>ou<li>ajouter àdata-magellan-arrival="value"Ajoutez un attribut, suivi d'un lien (page1) avec la même valeur que cet attribut.

Utilisationdata-magellan-destination="value"L'attribut contrôle la cible de la navigation Magellan, suivi immédiatement par les<a>Ajout d'élémentsname="value"attributs. Les valeurs des deux attributs doivent être cohérentes avecdata-magellan-arrivalla valeur est cohérente (page1).

Enfin, initialisez Foundation JS, et la navigation basculera automatiquement en fonction du contenu actuellement affiché lorsque l'utilisateur fait défiler la page.

Barre d'outils de l'en-tête de navigation Magellan

Exemple de navigation Magellan avec barre d'outils d'en-tête :

Exemple

<div data-magellan-expedition="fixed">
  <nav class="top-bar" data-topbar>
    ...

    <section class="top-bar-section">
      <ul class="left">
        <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>
        <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>
      </ul>
    </section>

  </nav>
</div>

<h3 data-magellan-destination="page1">Page1</h3>
<a name="page1"></a>
...

<h3 data-magellan-destination="page2">Page2</h3>
<a name="page2"></a>
...

Essayez-le vous-même »

Marge intérieure de la navigation Magellan

Par défaut, l'élément de la navigation Magellan<div>a 10px de marge intérieure. Vous pouvez la supprimer avec CSS :

Exemple

[data-magellan-expedition], [data-magellan-expedition-clone] {
    padding: 0;
}

Essayez-le vous-même »

Options de navigation Magellan

Utilisez l'attribut data-options pour modifier les paramètres de navigation Magellan, par exemple :<div data-magellan-expedition="fixed" data-options="destination_threshold:60">:

Name Type Default Description Exemple
active_class string active Spécifier la classe du lien actif Essayez-le vous-même
threshold nombre 0 Spécifier quand la navigation doit être fixée en position. Elle est calculée en fonction du défilement et sa valeur par défaut est 0 (auto). Essayez-le vous-même
destination_threshold nombre 20 Cette valeur définit la distance de la liste de navigation par rapport au haut lorsque le lien de navigation est affiché comme actif (fond bleu). Essayez-le vous-même
fixed_top nombre 0 Spécifie la valeur en pixels de la barre de navigation par rapport au haut. Essayez-le vous-même
autres extensions