Fundacja pasek nawigacji góry
Górny pasek nawigacyjny na głowie strony:
Przykłady
<Class Ul = "title-area ">
<Li class = "name">
<! - Jeśli nie musisz tytuł lub ikonę, aby go usunąć ->
<H1> <a href = "#"> WebSiteName </ a> </ h1>
</ Li>
<- Przycisk Fold na małym ekranie :! Usuń typ .menu-ikona, można usunąć ikonę.
Jeśli potrzebujesz, aby wyświetlić tylko obraz, można usunąć "Menu" Tekst ->
<Li class = "przełączać-topbar menu-ikonę"> <a href = "#"> <span> Menu </ span> </ a> </ li>
</ Ul>
<Section class = "top-bar -section">
<Class Ul = "left">
<Li class = "aktywny"> href = "#"> <a 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>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Przykłady analityczne
Użyj <nav class="top-bar" data-topbar> " danych topbar> Tworzenie standardowego paska narzędzi. .title-area klasa definiuje obszar logotypów (należy zapobiegać li.name wewnątrz). Po mniejszym ekranie widać przycisk "Menu". Fundacja menu w zależności od rozmiaru ekranu automatycznie przedłużana składany napój:
Na małym ekranie, ze względu na wielkość z wielu opcji będą ukryte. li.toggle-topbar menu.icon klasy tworzy przycisk menu, kliknij go, aby pokazać ukryte opcje.
? Wskazówka: Reset okno przeglądarki, aby zobaczyć efekt.
.top-bar-section definiuje łącza nawigacji sekcji. .left klasy określa związek wyrównany do lewej. .active klasa służy do wyświetlania wybranych elementów, na niebieskim tle.
Wskazówka: Jeśli chcesz, aby wyrównać do prawej linki nawigacyjne mogą być .left modyfikacji .right :
Można również ustawić wyrównanie do lewej wyrównany do prawej:
Przykłady
<Class Ul = "left">
<Li class = "aktywny"> href = "#"> <a Home </ a> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
</ Ul>
<Class Ul = "right">
<Li> <a href = "#"> Zapisz się </ a> </ li>
<Li> <a href = "#"> Zaloguj </ a> </ li>
</ Ul>
</ Section>
Spróbuj »
Pasek nawigacyjny przez .divider dodać linie klasy podziału (linie pionowe na dużym ekranie, mały ekran jest pozioma linia):
Przykłady
<Li class = "aktywny"> href = "#"> <a Home </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#"> Page 1 </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#"> Page 2 </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<Li class = "rozdzielacz"> </ li>
</ Ul>
Spróbuj »
Rozwijane menu nawigacyjnym bar
Można ustawić pasek nawigacyjny na górze menu rozwijanego.
Przez <li> element jest dodawany .has-dropdown klasę, aby ustawić menu rozwijanego:
Przykłady
<Class Ul = "left">
<Li class = "aktywny"> href = "#"> <a Home </ a> </ li>
<Li class = "ma-rozwijaną ">
<A Href = "#"> rozwijane </ a>
<Class Ul = "listy rozwijanej">
<Li> <a href = "#"> pierwsze ogniwo w rozwijanym </ a> </ li>
<Li> <a href = "#"> drugie ogniwo w rozwijanym </ a> </ li>
<Li class = "aktywny"> href = "#"> <a Aktywny ogniwem w rozwijanym </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Spróbuj »
linia podziału
Użyj .divider klasę, aby ustawić menu rozwijanego linia podziału:
Przykłady
<Li> <a href = "#"> jabłko </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> Pomarańczowy </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Szpinak </ a> </ li>
</ Ul>
Rozwijanego menu etykietę
W <li> w ramach dodatku <label> elementu, aby ustawić etykietę (tytuł) menu rozwijanego:
Przykłady
<Li> <label> owoce < / label> </ li>
<Li> <a href = "#"> jabłko </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> Pomarańczowy </ a> </ li>
<Li class = "rozdzielacz"> </ li>
<Li> <label> Warzywa < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Szpinak </ a> </ li>
</ Ul>
Wbudowany menu rozwijane
Rozwijane menu mogą być osadzone w rozwijanym menu:
Przykłady
<Class Ul = "left">
<Li class = "ma-rozwijaną ">
<A Href = "#"> rozwijane </ a>
<Class Ul = "listy rozwijanej">
<Li> <label> Level 1 </ label> </ li>
<Li> <a href = "#"> link </ a> </ li>
<Li> <a href = "#"> link </ a> </ li>
<Li class = "ma-rozwijaną ">
<A Href = "#"> Nowy rozwijane </ a>
<Class Ul = "listy rozwijanej">
<Li> <label> Poziom 2 </ label> </ li>
<Li> <a href = "#"> 2. poziom rozwijane </ a> </ li>
<Li> <a href = "#"> 2. poziom rozwijane </ a> </ li>
<Li class = "ma-rozwijaną ">
<A Href = "#"> Nowy rozwijane </ a>
<Class Ul = "listy rozwijanej">
<Li> <label> Poziom 3 </ label> </ li>
<Li> <a href = "#"> 3. poziom rozwijane </ a> </ li>
<Li> <a href = "#"> 3. poziom rozwijane </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Section>
Spróbuj »
klikalny
Domyślnie menu rozwijane na pasku nawigacyjnym, aby przesunąć kursor nad wyświetlaczem, możemy użyć data-options="is_hover: false" " atrybut, aby ustawić pasek nawigacyjny jest wyświetlany na kliknięcie myszą:
Przyciski i ikony na pasku nawigacyjnym
Można umieścić ikony na pasku nawigacyjnym i przyciski:
Można umieścić ikonę w pasku nawigacyjnym, można zobaczyć więcej zdjęć Style Foundation Ikona Tutorial :
Przykłady
<! - Fundacja ikona stylu ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Head>
<Class Ul = "left">
<Li class = "aktywny"> href = "#"> <a <i class = "fi-home"> </ i> Start </ a> </ li>
<Li> <a href = "#"> <i class =" fi-tułowia "> </ i> Zarejestruj się </ a> </ li>
<Li> <a href = "#"> <i class =" fi-powiększające szkło "> </ i> Szukaj </ a> </ li>
</ Ul>
Spróbuj »
Poprawiono nawigację
Pasek nawigacyjny może być ustalona w górnej części strony.
Przewiń pasek nawigacji strony u góry nie jest w ruchu.
Aby rozwiązać ten pasek nawigacyjny tylko na pasku nawigacyjnym po <div class="fixed"> wewnętrznej do:
Przykłady
<Nav class = "top-bar " danych topbar>
...
</ Nav>
</ Div>
Spróbuj »
Pasek nawigacyjny pozycjonowanie bezwzględne
Możemy umieścić pasek nawigacyjny <div class="sticky"> w pasku nawigacyjnym, aby ustawić pozycjonowanie bezwzględne, gdy pasek przewijania, aby rzucić się w regionie, na pasku nawigacyjnym w ustalonym jako pasku nawigacyjnym na górze nie poruszać:
Przykłady
<Nav class = "top-bar " danych topbar>
...
</ Nav>
</ Div>
Spróbuj »
Podczas korzystania .sticky klasę, na górnym pasku nawigacyjnym niezmienione i będą we wszystkich rozmiarach ekranu. Jeśli trzeba określić ustawienia na ekranie tylko w <nav> Poprzednia data-options="sticky_on: small|medium|large" | Średni Duży" właściwość:
Przykłady
<! - Tylko na dużym ekranie ->
<Nav class = "top-bar " dane-options danych topbar = "sticky_on: large">
..
</ Nav>
</ Div>
Lub przez wybór spośród wielu rozmiarów ekranu:
Przykłady
<! - Mały ekran i duży ekran (brak środku ekranu) ->
<Nav class = "top-bar " dane-options danych topbar = "sticky_on: [małe, duże]">
..
</ Nav>
</ Div>