Foundation Navegación Magellan
Cómo crear la navegación Magellan
La navegación Magellan es un índice de navegación, se crea de la siguiente manera:
Ejemplo
<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>
...
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Pruébalo »
Análisis del ejemplo
Agrega en el elemento <div>data-magellan-expedition="fixed"el atributo para crear la navegación Magellan.
Luego en<dd>o<li>agregar sobredata-magellan-arrival="value"el atributo, luego agrega un enlace con el mismo valor del atributo (page1).
Usadata-magellan-destination="value"el atributo para controlar el objetivo de la navegación Magellan, y el siguiente<a>elemento añadename="value"atributo. Los valores de ambos atributos deben coincidir con eldata-magellan-arrivalmismo valor de (page1).
Finalmente, inicializa Foundation JS, y cuando el usuario se desplace por la página, la navegación cambiará automáticamente según el contenido mostrado.
Barra superior de la navegación Magellan
Ejemplo de la navegación Magellan usando la barra superior:
Ejemplo
<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>
...
Pruébalo »
Relleno (padding) de la navegación Magellan
Por defecto, en la navegación Magellan<div>los elementos tienen 10px de relleno.
Opciones de la navegación Magellan
Usa el atributo data-options para modificar la configuración de la navegación Magellan, por ejemplo<div data-magellan-expedition="fixed" data-options="destination_threshold:60">:
| Nombre | Tipo | Predeterminado | Descripción | Ejemplo |
|---|---|---|---|---|
| active_class | string | active | Especifica la clase del enlace activo. | Pruébalo |
| threshold | number | 0 | Especifica cuándo la navegación debe tener una posición fija. Se calcula según el desplazamiento de la barra de desplazamiento, por defecto es 0 (auto). | Pruébalo |
| destination_threshold | number | 20 | Este valor establece la distancia desde la parte superior de la lista de navegación cuando el enlace de navegación se muestra como activo (fondo azul). | Pruébalo |
| fixed_top | number | 0 | Especifica el valor en píxeles de la distancia de la barra de navegación desde el encabezado. | Pruébalo |