Fundação barra de navegação superior
A barra de navegação no topo da cabeça da página:
Exemplos
<Class = Ul "title-área ">
<Li class = "nome">
<! - Se você não precisa de um título ou ícone para apagá-lo ->
<H1> <a href = "#"> WebSiteName </ a> </ h1>
</ Li>
Botão <- Fold na tela pequena :! Retirar tipo .menu-ícone, você pode remover o ícone.
Se você precisar exibir apenas a imagem, você pode suprimir do texto "Menu" ->
<LI class = "-topbar alternar menu do ícone"> <a href = "#"> <span> Menu </ span> </ a> </ li>
</ Ul>
<Seção class = "top-bar -section">
<Class Ul = "left">
<LI class = "ativo"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
<! - Inicialização Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
Exemplos de analítico
Use <nav class="top-bar" data-topbar> " data-topbar> Criar barra de ferramentas padrão. .title-area classe define a área do logótipo (deve ser evitada li.name dentro). Após a tela menor você pode ver um botão "menu". Fundação do menu de acordo com o tamanho da tela automaticamente prorrogado bebida dobrar:
Na tela pequena, por causa do tamanho de muitas das opções serão ocultados. li.toggle-topbar menu.icon classe cria um botão de menu, clique nele para mostrar as opções escondidas.
? Dica: Repor janela do seu navegador para ver o efeito.
.top-bar-section define a navegação seção de links. .left classe especifica o link alinhado à esquerda. .active classe é usada para exibir os itens selecionados, um fundo azul.
Dica: Se você quiser Para alinhar à direita os links de navegação pode ser .left modificar .right :
Você também pode definir o alinhamento à esquerda alinha com o direito:
Exemplos
<Class Ul = "left">
<LI class = "ativo"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
</ Ul>
<Class Ul = "right">
<Li> <a href = "#"> Sign Up </ a> </ li>
<Li> <a href = "#"> Entre </ a> </ li>
</ Ul>
</ Section>
tente »
barra de navegação por .divider para adicionar linhas divisórias da classe (linhas verticais na tela grande, o pequeno ecrã é uma linha horizontal):
Exemplos
<LI class = "ativo"> <a href = "#"> Home </ a> </ li>
<LI class = "divisor"> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<LI class = "divisor"> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<LI class = "divisor"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<LI class = "divisor"> </ li>
</ Ul>
tente »
Drop-down menu barra de navegação
Você pode definir a barra de navegação no topo do menu drop-down.
Pela <li> o elemento é adicionado .has-dropdown classe para definir o menu drop-down:
Exemplos
<Class Ul = "left">
<LI class = "ativo"> <a href = "#"> Home </ a> </ li>
<LI class = "tem-suspenso ">
<A Href = "#"> suspensa </ a>
<Class Ul = "dropdown">
<Li> <a href = "#"> primeiro elo suspensa </ a> </ li>
<Li> <a href = "#"> segundo link no menu suspenso </ a> </ li>
<LI class = "ativo"> <a href = "#"> ligação ativa em suspenso </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Section>
tente »
linha divisória
Use .divider classe para definir o menu drop-down linha divisória:
Exemplos
<Li> <a href = "#"> a Apple </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> laranja </ a> </ li>
<LI class = "divisor"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> espinafre </ a> </ li>
</ Ul>
Pull-down rótulo de menu
Em <li> dentro add <label> elemento para definir o rótulo (título) menu suspenso:
Exemplos
<Li> <label> Fruit < / label> </ li>
<Li> <a href = "#"> a Apple </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> laranja </ a> </ li>
<LI class = "divisor"> </ li>
<Li> <label> Vegetal < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> espinafre </ a> </ li>
</ Ul>
menu drop-down incorporado
menu drop-down pode ser incorporado em um menu drop-down:
Exemplos
<Class Ul = "left">
<LI class = "tem-suspenso ">
<A Href = "#"> suspensa </ a>
<Class Ul = "dropdown">
<Li> <label> Nível 1 </ label> </ li>
<Li> <a href = "#"> link </ a> </ li>
<Li> <a href = "#"> link </ a> </ li>
<LI class = "tem-suspenso ">
<A Href = "#"> New suspensa </ a>
<Class Ul = "dropdown">
<Li> <label> Nível 2 </ label> </ li>
<Li> <a href = "#"> 2º nível suspenso </ a> </ li>
<Li> <a href = "#"> 2º nível suspenso </ a> </ li>
<LI class = "tem-suspenso ">
<A Href = "#"> New suspensa </ a>
<Class Ul = "dropdown">
<Li> <label> Nível 3 </ label> </ li>
<Li> <a href = "#"> 3º nível suspenso </ a> </ li>
<Li> <a href = "#"> 3º nível suspenso </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Section>
tente »
clicável
Por padrão, o menu drop-down na barra de navegação para mover o mouse sobre a tela, podemos usar a data-options="is_hover: false" " atributo para definir a barra de navegação é exibido com o clique do mouse:
Botões e ícones na barra de navegação
Você pode colocar ícones na barra de navegação e botões:
Você pode colocar um ícone na barra de navegação, você pode ver mais fotos Estilo Fundação Ícone Tutorial :
Exemplos
<! - Ícone de estilo Foundation ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Class Ul = "left">
<LI class = "ativo"> <a href = "#"> <i class = "fi-home"> </ i> Casa </ a> </ li>
<Li> <a href = "#"> <i class =" fi-tronco "> </ i> Registar-se </ a> </ li>
<Li> <a href = "#"> <i class =" fi-lupa "> </ i> Procurar </ a> </ li>
</ Ul>
tente »
navegação fixa
barra de navegação pode ser fixado no topo da página.
Role a barra de navegação da página no topo não está se movendo.
Para fixar a barra de navegação apenas para a barra de navegação no <div class="fixed"> interior para:
barra de navegação posicionamento absoluto
Podemos colocar a barra de navegação <div class="sticky"> na barra de navegação para ajustar o posicionamento absoluto, quando a barra de rolagem para rolar para a região, a barra de navegação, fixado como a barra de navegação no topo não se move:
Quando você usa .sticky classe, a barra de navegação superior fixa e vontade em todos os tamanhos de tela. Se você precisa especificar as configurações na tela somente em <nav> Anterior data-options="sticky_on: small|medium|large" | médio | grande" propriedade:
Exemplos
<! - Só na tela grande ->
<Nav class = "top-bar "-topbar dados de opções de dados = "sticky_on: large">
..
</ Nav>
</ Div>
Ou por um arranjo de uma pluralidade de tamanho da tela:
Exemplos
<! - Tela pequena e grande ecrã (sem meio da tela) ->
<Nav class = "top-bar "-opções de dados de topbar data = "sticky_on: [pequeno, grande]">
..
</ Nav>
</ Div>