Najlepszy samouczek Fundacja pasek nawigacji góry W 2024 r. W tym samouczku możesz dowiedzieć się
Rozwijane menu nawigacyjnym bar,Rozwijanego menu etykietę,Przyciski i ikony na pasku nawigacyjnym,Poprawiono nawigację,Pasek nawigacyjny pozycjonowanie bezwzględne,
Fundacja pasek nawigacji góry
Górny pasek nawigacyjny na głowie strony:
Przykłady
<Nav class = "top-bar " danych topbar>
<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
:
Przykłady
<Section class = "top-bar -section">
<Ul class = "right"> pl.
Spróbuj » Można również ustawić wyrównanie do lewej wyrównany do prawej:
Przykłady
<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>
</ 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
<Class Ul = "left">
<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
<Section class = "top-bar -section">
<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
<Class Ul = "listy rozwijanej">
<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>
Spróbuj »
Rozwijanego menu etykietę
W <li>
w ramach dodatku <label>
elementu, aby ustawić etykietę (tytuł) menu rozwijanego:
Przykłady
<Class Ul = "listy rozwijanej">
<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>
Spróbuj » Wbudowany menu rozwijane
Rozwijane menu mogą być osadzone w rozwijanym menu:
Przykłady
<Section class = "top-bar -section">
<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ą:
Przykłady
<Nav class = "top-bar " dane-options danych topbar = "is_hover: false">
Spróbuj »
Przyciski i ikony na pasku nawigacyjnym
Można umieścić ikony na pasku nawigacyjnym i przyciski:
Przykłady
<Li> <a href = "#" class = "button"> Link przyciskowy </ a> </ li>
Spróbuj » Można umieścić ikonę w pasku nawigacyjnym, można zobaczyć więcej zdjęć Style Foundation Ikona Tutorial :
Przykłady
<Head>
<! - Fundacja ikona stylu ->
<Link rel = "stylesheet" href = "http://static.w3write.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
<Div class = "stałe">
<Nav class = "top-bar " danych topbar>
pl.
</ 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
<Div class = "lepkie">
<Nav class = "top-bar " danych topbar>
pl.
</ 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
<Div class = "lepkie">
<! - Tylko na dużym ekranie ->
<Nav class = "top-bar " dane-options danych topbar = "sticky_on: large">
pl
</ Nav>
</ Div>
Lub przez wybór spośród wielu rozmiarów ekranu:
Przykłady
<Div class = "lepkie">
<! - Mały ekran i duży ekran (brak środku ekranu) ->
<Nav class = "top-bar " dane-options danych topbar = "sticky_on: [małe, duże]">
pl
</ Nav>
</ Div>