Stiftung oberen Navigationsleiste
Die obere Navigationsleiste am Kopf der Seite:
Beispiele
<Ul class = "title-Bereich ">
<Li class = "name">
<! - Wenn Sie es keinen Titel oder das Symbol löschen müssen ->
<H1> <a href = "#"> Website </ a> </ h1>
</ Li>
<- Falten - Taste auf dem kleinen Bildschirm :! entfernen .menu-Symbol - Typ, können Sie das Symbol entfernen.
Wenn Sie nur das Bild angezeigt werden müssen, können Sie die "Menü" Text löschen ->
<Li class = "Toggle-topbar Menü-Symbol"> <a href = "#"> <span> Menü </ span> </ a> </ li>
</ Ul>
<Section class = "top-bar -Abschnitt">
<Ul class = "left">
<Li class = "aktiv"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Seite 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
</ Ul>
</ Section>
</ Nav>
<! - Initialisierung Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Beispiele für analytische
Verwenden Sie <nav class="top-bar" data-topbar> " data-topbar> Erstellen Sie Standard - Symbolleiste. .title-area - Klasse definiert die Site - Logo - Bereich (muss verhindert werden li.name innen). Nach dem kleineren Bildschirm können Sie eine Taste "Menü" zu sehen. Stiftung des Menüs nach Bildschirmgröße automatisch Falten Getränk erweitert:
Auf dem kleinen Bildschirm, wegen der Größe vieler der Optionen werden ausgeblendet. li.toggle-topbar menu.icon Klasse ein Menü - Taste erstellt, klicken Sie die versteckten Optionen anzuzeigen.
? Tipp: Ihr Browser - Fenster Setzen Sie den Effekt zu sehen.
.top-bar-section definiert der Navigationsbereich verbindet. .left - Klasse gibt die Verbindung linksbündig. .active Klasse wird verwendet , um die ausgewählten Elemente angezeigt werden , einen blauen Hintergrund.
Tipp: Wenn Sie wollen , rechts richten sich die Navigations - Links können sein .left ändern .right :
Sie können einstellen, auch die linke Ausrichtung mit der rechten ausrichtet:
Beispiele
<Ul class = "left">
<Li class = "aktiv"> <a href = "#"> Home </ a> </ li>
<Li> <a href = "#"> Seite 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
</ Ul>
<Ul class = "right">
<Li> <a href = "#"> Up - Zeichen </ a> </ li>
<Li> <a href = "#"> Einloggen </ a> </ li>
</ Ul>
</ Section>
Versuchen »
Navigationsleiste von .divider Klasse Trennlinien hinzufügen (vertikale Linien auf dem großen Bildschirm, der kleine Bildschirm ist eine horizontale Linie):
Beispiele
<Li class = "aktiv"> <a href = "#"> Home </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> Seite 1 </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<Li class = "Teiler"> </ li>
</ Ul>
Versuchen »
Drop-Down-Menü Navigationsleiste
Sie können an der Spitze der Drop-down-Menü, um die Navigationsleiste.
Durch die <li> wird das Element hinzugefügt .has-dropdown - .has-dropdown - Klasse das Dropdown-Menü eingestellt werden :
Beispiele
<Ul class = "left">
<Li class = "aktiv"> <a href = "#"> Home </ a> </ li>
<Li class = "has-Drop - Down ">
<A Href = "#"> Dropdown </ a>
<Ul class = "Dropdown">
<Li> <a href = "#"> erste Glied in Dropdown </ a> </ li>
<Li> <a href = "#"> zweiten Link in Dropdown </ a> </ li>
<Li class = "aktiv"> <a href = "#"> Aktive Link in Dropdown </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Versuchen »
Scheidelinie
Verwenden Sie .divider Klasse die Trennlinie im Dropdown-Menü eingestellt werden :
Beispiele
<Li> <a href = "#"> von Apple </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> orange </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Spinat </ a> </ li>
</ Ul>
Pull-Down-Menü Label
In <li> innerhalb add <label> Element das Etikett (Titel) , Pull-Down - Menü eingestellt werden :
Beispiele
<Li> <label> Obst < / label> </ li>
<Li> <a href = "#"> von Apple </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> orange </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <label> Gemüse < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Spinat </ a> </ li>
</ Ul>
Embedded Dropdown-Menü
Drop-Down-Menü kann in einem Drop-Down-Menü eingebettet werden:
Beispiele
<Ul class = "left">
<Li class = "has-Drop - Down ">
<A Href = "#"> Dropdown </ a>
<Ul class = "Dropdown">
<Li> <label> Stufe 1 </ label> </ li>
<Li> <a href = "#"> Link - </ a> </ li>
<Li> <a href = "#"> Link - </ a> </ li>
<Li class = "has-Drop - Down ">
<A Href = "#"> New Dropdown </ a>
<Ul class = "Dropdown">
<Li> <label> Stufe 2 </ label> </ li>
<Li> <a href = "#"> 2. Ebene Dropdown </ a> </ li>
<Li> <a href = "#"> 2. Ebene Dropdown </ a> </ li>
<Li class = "has-Drop - Down ">
<A Href = "#"> New Dropdown </ a>
<Ul class = "Dropdown">
<Li> <label> Stufe 3 </ label> </ li>
<Li> <a href = "#"> 3. Ebene Dropdown </ a> </ li>
<Li> <a href = "#"> 3. Ebene Dropdown </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Versuchen »
klickbare
Standardmäßig ist das Dropdown-Menü in der Navigationsleiste , um die Maus über die Anzeige zu bewegen, können wir den Einsatz data-options="is_hover: false" " Attribut der Navigationsleiste eingestellt wird , bei dem Klicken der Maus angezeigt:
Tasten und Symbole auf der Navigationsleiste
Sie können Symbole in der Navigationsleiste und Schaltflächen platzieren:
Sie können ein Symbol in der Navigationsleiste setzen, können Sie mehr Bilder der Design - Ansicht Foundation Icon Tutorial :
Beispiele
<! - Stiftung Icon - Stil ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Ul class = "left">
<Li class = "aktiv"> <a href = "#"> <i class = "fi-home"> </ i> Startseite </ a> </ li>
<Li> <a href = "#"> <i class =" fi-Torso "> </ i> Anmelden </ a> </ li>
<Li> <a href = "#"> <i class =" fi-Vergrößerungsglas "> </ i> Suchen </ a> </ li>
</ Ul>
Versuchen »
Feste Navigation
Navigationsleiste kann am oberen Rand der Seite befestigt werden.
Blättern Sie die Seite Navigationsleiste am oberen Rand bewegt sich nicht.
Zur Fixierung der Navigationsleiste einfach auf die Navigationsleiste auf der <div class="fixed"> innen nach:
Beispiele
<Nav class = "top-bar " data-topbar>
...
</ Nav>
</ Div>
Versuchen »
Navigationsleiste absolute Positionierung
Wir können die Navigationsleiste setzen <div class="sticky"> in der Navigationsleiste die absolute Positionierung zu setzen, wenn die Bildlaufleiste in die Region zu rollen, der Navigationsleiste als an der Spitze , wie die Navigationsleiste befestigt bewegt sich nicht:
Beispiele
<Nav class = "top-bar " data-topbar>
...
</ Nav>
</ Div>
Versuchen »
Wenn Sie .sticky Klasse, die obere Navigationsleiste befestigt und wird in allen Bildschirmgrößen. Wenn Sie die Einstellungen auf dem Bildschirm nur in angeben <nav> Zurück data-options="sticky_on: small|medium|large" | mittel | groß" Eigenschaft:
Beispiele
<! - Nur auf der großen Leinwand ->
<Nav class = "top-bar " Daten-topbar Daten-Optionen = "sticky_on: large">
..
</ Nav>
</ Div>
Oder durch eine Anordnung aus einer Vielzahl von Bildschirmgröße:
Beispiele
<! - Kleiner Bildschirm und die große Leinwand (keine Mitte des Bildschirms) ->
<Nav class = "top-bar " Daten-topbar Daten-Optionen = "sticky_on: [klein, groß]">
..
</ Nav>
</ Div>