Fondazione barra di navigazione superiore
La barra di navigazione in alto sulla testa della pagina:
Esempi
<Ul class = "title-zona ">
<Li class = "nome">
<! - Se non è necessario un titolo o icona per eliminarlo ->
<H1> <a href = "#"> WebSiteName </ a> </ h1>
</ Li>
<- Pulsante Fold sul piccolo schermo :! cancella .menu-icona, è possibile rimuovere l'icona.
Se è necessario visualizzare solo l'immagine, è possibile eliminare il testo "Menu" ->
<Li class = "alternare-topbar menù-icona"> <a href = "#"> <span> Menu </ span> </ a> </ li>
</ Ul>
<Sezione class = "top-bar -sezione">
<Ul class = "left">
<Li class = "attivo"> <a href = "#"> casa </ a> </ li>
<Li> <a href = "#"> Pagina 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Esempi di analitica
Utilizzare <nav class="top-bar" data-topbar> " data-topbar> Crea barra degli strumenti standard. .title-area classe definisce l'area del sito logo (deve essere impedito li.name all'interno). Dopo il piccolo schermo è possibile vedere un pulsante "menu". Fondazione del menu in base alle dimensioni dello schermo automaticamente esteso bevanda di piegatura:
Sul piccolo schermo, a causa delle dimensioni di molte delle opzioni sarà nascosto. li.toggle-topbar menu.icon classe crea un pulsante del menu, fare clic per visualizzare le opzioni nascoste.
? Tip: Cambia la tua finestra del browser per vedere l'effetto.
.top-bar-section definisce la navigazione collega sezione. .left classe specifica il collegamento allineato a sinistra. .active classe viene utilizzata per visualizzare gli elementi selezionati, uno sfondo blu.
Suggerimento: Se si desidera destro allineare i link di navigazione può essere .left modificare .right :
È inoltre possibile impostare l'allineamento a sinistra si allinea con il diritto:
Esempi
<Ul class = "left">
<Li class = "attivo"> <a href = "#"> casa </ a> </ li>
<Li> <a href = "#"> Pagina 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
</ Ul>
<Ul class = "right">
<Li> <a href = "#"> Registrati </ a> </ li>
<Li> <a href = "#"> Accedi </ a> </ li>
</ Ul>
</ Section>
Prova »
Barra di navigazione da .divider aggiungere linee divisorie classe (linee verticali sul grande schermo, il piccolo schermo è una linea orizzontale):
Esempi
<Li class = "attivo"> <a href = "#"> casa </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#"> Pagina 1 </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<Li class = "divider"> </ li>
</ Ul>
Prova »
Menu a discesa barra di navigazione
È possibile impostare la barra di navigazione nella parte superiore del menu a discesa.
Con il <li> l'elemento viene aggiunto .has-dropdown di classe per impostare il menu a discesa:
Esempi
<Ul class = "left">
<Li class = "attivo"> <a href = "#"> casa </ a> </ li>
<Li class = "ha-discesa ">
<A Href = "#"> discesa </ a>
<Ul class = "discesa">
<Li> <a href = "#"> primo anello discesa </ a> </ li>
<Li> <a href = "#"> secondo link in discesa </ a> </ li>
<Li class = "attivo"> <a href = "#"> Collegamento attivo in discesa </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Prova »
linea di demarcazione
Utilizzare .divider classe per impostare il menu a discesa linea di demarcazione:
Esempi
<Li> <a href = "#"> di Apple </ a> </ li>
<Li> <a href = "#"> banana </ a> </ li>
<Li> <a href = "#"> arancione </ a> </ li>
<Li class = "divider"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> spinaci </ a> </ li>
</ Ul>
Pull-down menu etichetta
In <li> all'interno add <label> menu a discesa elemento per impostare l'etichetta (titolo):
Esempi
<Li> <label> Frutta < / label> </ li>
<Li> <a href = "#"> di Apple </ a> </ li>
<Li> <a href = "#"> banana </ a> </ li>
<Li> <a href = "#"> arancione </ a> </ li>
<Li class = "divider"> </ li>
<Li> <label> Verdure < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> spinaci </ a> </ li>
</ Ul>
menu a discesa embedded
Menu a discesa può essere incorporato in un menu a discesa:
Esempi
<Ul class = "left">
<Li class = "ha-discesa ">
<A Href = "#"> discesa </ a>
<Ul class = "discesa">
<Li> <label> Livello 1 </ label> </ li>
<Li> <a href = "#"> Collegamento </ a> </ li>
<Li> <a href = "#"> Collegamento </ a> </ li>
<Li class = "ha-discesa ">
<A Href = "#"> Nuova discesa </ a>
<Ul class = "discesa">
<Li> <label> Livello 2 </ label> </ li>
<Li> <a href = "#"> 2 ° livello a discesa </ a> </ li>
<Li> <a href = "#"> 2 ° livello a discesa </ a> </ li>
<Li class = "ha-discesa ">
<A Href = "#"> Nuova discesa </ a>
<Ul class = "discesa">
<Li> <label> Livello 3 </ label> </ li>
<Li> <a href = "#"> 3 ° livello a discesa </ a> </ li>
<Li> <a href = "#"> 3 ° livello a discesa </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Prova »
cliccabile
Per impostazione predefinita, il menu a discesa nella barra di navigazione per spostare il mouse sopra il display, si può utilizzare il data-options="is_hover: false" " attributo per impostare la barra di navigazione viene visualizzata con un semplice clic del mouse:
Pulsanti e icone sulla barra di navigazione
È possibile inserire icone sulla barra di navigazione e pulsanti:
È possibile inserire un'icona nella barra di navigazione, è possibile visualizzare più immagini di stile della Fondazione Icona Tutorial :
Esempi
<! - Icona di stile Fondazione ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Ul class = "left">
<Li class = "attivo"> <a href = "#"> <i class = "fi-casa"> </ i> Home </ a> </ li>
<Li> <a href = "#"> <i class =" fi-torso "> </ i> Registrati </ a> </ li>
<Li> <a href = "#"> <i class =" fi-lente di ingrandimento "> </ i> ricerca </ a> </ li>
</ Ul>
Prova »
navigazione fissa
Barra di navigazione può essere fissato alla parte superiore della pagina.
Scorrere la barra di pagina di navigazione in alto non si muove.
Per fissare la barra di navigazione solo per la barra di navigazione sul <div class="fixed"> all'interno per:
Barra di navigazione posizionamento assoluto
Siamo in grado di mettere la barra di navigazione <div class="sticky"> nella barra di navigazione per impostare il posizionamento assoluto, quando la barra di scorrimento a rotolare verso la regione, la barra di navigazione come fissato come la barra di navigazione in alto non si muove:
Quando si utilizza .sticky classe, barra di navigazione superiore fisso e volontà in tutte le dimensioni dello schermo. Se è necessario specificare le impostazioni sullo schermo solo in <nav> precedente data-options="sticky_on: small|medium|large" | media | grande" di proprietà:
Esempi
<! - Solo sul grande schermo ->
<Nav class = "top-bar " data-opzioni di data-barra superiore = "sticky_on: grande">
..
</ Nav>
</ Div>
Oppure da una matrice di una pluralità di dimensioni dello schermo:
Esempi
<! - Piccolo schermo e il grande schermo (senza centro dello schermo) ->
<Nav class = "top-bar "-opzioni dati data-barra superiore = "sticky_on: [piccolo, grande]">
..
</ Nav>
</ Div>