Fundación Magellan (Magellan) de navegación
Cómo crear una navegación Magellan
Magellan Navigation es un índice de navegación se crea de la siguiente manera:
Ejemplos
<Dl class = "sub-nav ">
<Dd datos Magellan-llegada = "page1"> <a href = "# page1"> Página 1 </ a> </ dd>
<Dd datos Magellan-llegada = "página 2"> <a href = "# page2"> Página 2 </ a> </ dd>
</ Dl>
</ Div>
<H3-Magellan-destino de datos = "page1"> Página1 </ h3>
Nombre <A = "page1"> </ a>
...
<H3-Magellan-destino de datos = "página 2"> <Página2 / h3>
Nombre <A = "page2"> </ a>
...
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Ejemplos de analítica
En el elemento <div> para añadir data-magellan-expedition="fixed" " propiedad para crear Magellan Navigation.
Entonces <dd> o <li> Añadir la data-magellan-arrival=" value " " atributo, y añadir un enlace de vuelta como el valor del atributo (page1).
Usando data-magellan-destination="value" " atributo para controlar el destino de navegación Magellan, seguido de los <a> elementos añadir name=" value " atributo. Dos valor de la propiedad debe ser data-magellan-arrival valores consistentes (Página 1).
Por último, la Fundación JS inicialización, la navegación del usuario mientras se desplaza la página cambiará automáticamente en función del contenido aparece en ese momento.
Barra de herramientas de la cabeza Magellan Navigation
Barra de herramientas de la cabeza Magellan Navigation usando ejemplos:
Ejemplos
<Nav class = "barra superior " datos topbar>
...
<Sección class = "top-bar -section">
<Ul class = "left">
<Li datos Magellan-llegada = "page1"> <a href = "# page1"> Página 1 </ a> </ li>
<Li datos Magellan-llegada = "página 2"> <a href = "# page2"> Página 2 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
</ Div>
<H3-Magellan-destino de datos = "page1"> Página1 </ h3>
Nombre <A = "page1"> </ a>
...
<H3-Magellan-destino de datos = "página 2"> <Página2 / h3>
Nombre <A = "page2"> </ a>
...
Trate »
Magellan Navigation Relleno
De forma predeterminada, la navegación Magellan <div> elemento tiene el relleno de 10px. CSS se puede utilizar para eliminarlo:
opciones de navegación Magellan
Utilizando datos a las opciones de modificar los atributos de configuración de navegación Magellan, como <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| nombre | tipo | defecto | descripción | Ejemplos |
|---|---|---|---|---|
| active_class | cadena | activo | Clase especifica el enlace de activación | probar |
| umbral | número | 0 | Especifique en qué momento la navegación necesita una posición fija. Se calculará de acuerdo con la barra de desplazamiento, el valor predeterminado es 0 (automático). | probar |
| destination_threshold | número | 20 | El valor de ajuste está configurado para mostrar el valor de los enlaces de navegación para navegar desde la parte superior de la lista está activa (fondo azul) cuando. | probar |
| fixed_top | número | 0 | Especifica los valores de los píxeles de la cabeza de la barra de navegación | probar |