Fundação Magellan (Magalhães) navegação
Como criar uma navegação Magellan
Magellan Navigation é um índice de navegação é criada como se segue:
Exemplos
<Dl class = "sub-nav ">
<Dd data-magalhães-chegada = "Página1"> <a href = "# page1"> Page 1 </ a> </ dd>
<Dd data-magalhães-chegada = "page2"> <a href = "# page2"> Page 2 </ a> </ dd>
</ Dl>
</ Div>
<H3-magalhães-destino de dados = "Página1"> Página1 </ h3>
nome <A = "page1"> </ a>
...
<H3-magalhães-destino de dados = "page2"> Página2 </ h3>
nome <A = "page2"> </ a>
...
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
Exemplos de analítico
No elemento <div> para adicionar data-magellan-expedition="fixed" " propriedade para criar Magellan Navigation.
Então <dd> ou <li> Adicione o data-magellan-arrival=" value " " atributo, e adicionar um link de volta como o valor do atributo (página 1).
Utilizando data-magellan-destination="value" " atributo para controlar o destino de navegação Magellan, seguido pelos <a> elementos adicionar name=" value " atributo. Dois valor da propriedade deve ser data-magellan-arrival valores consistentes (Página1).
Finalmente, a Fundação inicialização JS, a navegação do usuário enquanto estiver rolando a página irá mudar automaticamente com base no conteúdo exibido atualmente.
cabeça Magellan Navigation Toolbar
cabeça Magellan barra de navegação usando exemplos:
Exemplos
<Nav class = "top-bar " data-topbar>
...
<Seção class = "top-bar -section">
<Class Ul = "left">
<Li data-magalhães-chegada = "Página1"> <a href = "# page1"> Page 1 </ a> </ li>
<Li data-magalhães-chegada = "page2"> <a href = "# page2"> Page 2 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
</ Div>
<H3-magalhães-destino de dados = "Página1"> Página1 </ h3>
nome <A = "page1"> </ a>
...
<H3-magalhães-destino de dados = "page2"> Página2 </ h3>
nome <A = "page2"> </ a>
...
tente »
Magellan Navigation Padding
Por padrão, a navegação Magellan <div> elemento tem estofo de 10px. CSS pode ser usado para removê-lo:
opções de navegação Magellan
Utilizando-opções de dados modificar os atributos de definições de navegação Magellan, como <div data-magellan-expedition="fixed" data-options="destination_threshold:60"> :
| nome | tipo | omissão | descrição | Exemplos |
|---|---|---|---|---|
| active_class | corda | ativo | Classe especifica o link de ativação | tentar |
| limiar | número | 0 | Especificar em que momento a navegação precisa de uma posição fixa. Será calculado de acordo com a barra de rolagem, o padrão é 0 (automático). | tentar |
| destination_threshold | número | 20 | O valor ajustado é definido para exibir o valor dos links de navegação para navegar a partir do topo da lista está ativa (fundo azul) quando. | tentar |
| fixed_top | número | 0 | Especifica os valores de pixel da cabeça barra de navegação | tentar |