Demo: paski nawigacyjne
Pionowy
paski nawigacyjne
Mając łatwy w obsłudze nawigacja jest ważne dla każdej strony internetowej.
Z CSS można przekształcić menu HTML nudnych do ładnych pasków nawigacyjnych.
Pasek nawigacyjny = Lista linków
Pasek nawigacyjny potrzebuje standardowego HTML jako bazę.
W naszych przykładach będziemy budować pasek nawigacyjny ze standardowej listy HTML.
Pasek nawigacyjny jest w zasadzie lista linków, więc przy użyciu <ul> i <li> elementy sens:
Przykład
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Spróbuj sam " Teraz usunąć pociski i marginesy i dopełnienia z listy:
Przykład wyjaśnił:
-
list-style-type: none;- Usuwa kul. Pasek nawigacyjny nie musi znaczniki list - Zestaw
margin: 0;ipadding: 0;usunąć domyślnych ustawień przeglądarki
Kod w powyższym przykładzie jest to standardowy kod używany zarówno pionowych i poziomych pasków nawigacyjnych.
Pionowy pasek nawigacji
Aby zbudować pionowy pasek nawigacyjny, można projektować na <a> elementów wewnątrz listy, w uzupełnieniu do powyższego kodu:
Przykład wyjaśnił:
-
display: block;- Wyświetlanie linków jako elementy blokowe sprawia, że cały obszar klikalny link (nie tylko tekst), a to pozwala nam określić width (i padding, margin, height , itp, jeśli chcesz) -
width: 60px;- elementy blokowe potrwać całą dostępną domyślnie szerokość. Chcemy, aby określić szerokość 60 pikseli
Można również ustawić szerokość <ul> i usunąć szerokość <a> , jak będą trwać całą dostępną szerokość, gdy wyświetlane jako elementy blokowe. To będzie produkować ten sam rezultat, co naszym poprzednim przykładzie:
Przykład
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Spróbuj sam " Pionowy pasek nawigacji Przykłady
Tworzenie podstawowego pionowy pasek nawigacji z szarym kolorem tła i zmienić kolor tła linki, gdy użytkownik przesunie kursor nad nimi:
Przykład
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Spróbuj sam " Aktywny / Aktualny Nawigacja link
Dodaj "aktywna" klasę do bieżącego link, aby poinformować użytkownika, która strona jest on / ona na:
Centrum linki i dodawać obramowania
Dodaj text-align:center do <li> lub <a> centrum linki.
Dodaj border właściwość <ul> dodać obramowanie wokół paska nawigacyjnego. Jeśli też chcesz granic wewnątrz paska nawigacyjnego, dodać border-bottom wszystkim <li> elementy, z wyjątkiem ostatniego:
Przykład
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Spróbuj sam " Poprawiono pełnej wysokości w pionie pasek nawigacyjny
Tworzenie pełnej wysokości, "sticky" boczny nawigacja:
Przykład
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Spróbuj sam " Uwaga: Ten przykład może nie działać prawidłowo na urządzeniach mobilnych.
Poziomy pasek nawigacji
Istnieją dwa sposoby, aby utworzyć poziomy pasek nawigacyjny. Korzystanie zwbudowanych lub pływającychelementów listy.
Inline elementów listy
Jednym ze sposobów, aby zbudować poziomy pasek nawigacyjny jest określenie <li> elementy jak inline, oprócz "standard" kodu powyżej:
Przykład wyjaśnił:
-
display: inline;- domyślnie <li> elementy są elementy blokowe. Tutaj usuwamy linia okaże się przed i po każdym elemencie listy, aby wyświetlić je w jednej linii
Pływające Pozycji
Innym sposobem tworzenia poziomy pasek nawigacyjny jest float <li> elementy i określić układ dla linków nawigacyjnych:
Przykład
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Spróbuj sam " Przykład wyjaśnił:
-
float: left;- stosowanie pływaka dostać elementy blokowe przesuwać się obok siebie -
display: block;- Wyświetlanie linków jako elementy blokowe sprawia, że cały obszar klikalny link (nie tylko tekst), a to pozwala nam określić wyściółki (i height, width, margins itd jeśli chcesz) -
padding: 8px;- od elementów bloku zajmują całą dostępną szerokość, że nie mogą unosić się obok siebie. W związku z tym, należy określić pewne dopełnienie, aby je dobrze wyglądać -
background-color: #dddddd;- Dodaj szarym tle kolorów, aby każdy element
Wskazówka: Dodaj background-color do <ul> zamiast każdego <a> elementu jeśli chcesz pełnej szerokości kolor tła:
Poziomy pasek nawigacji Przykłady
Tworzenie podstawowego poziomy pasek nawigacji z ciemnym kolorem tła i zmienić kolor tła linki, gdy użytkownik przesunie kursor nad nimi:
Przykład
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Spróbuj sam " Aktywny / Aktualny Nawigacja link
Dodaj "active" klasy do aktualnego linku, aby użytkownik mógł wiedzieć, która strona jest on / ona na:
Prawy-align Linki
Prawy-align linki pływających elementów listy do prawej ( float:right; )
Przykład
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Spróbuj sam " dzielniki graniczne
Dodaj border-right właściwość <li> tworzyć dzielniki link:
Przykład
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Spróbuj sam " Poprawiono Pasek nawigacyjny
Sprawiają, że pobyt pasku nawigacyjnym u góry lub u dołu strony, nawet gdy użytkownik przewinie stronę:
Uwaga: Powyższe przykłady mogą nie działać poprawnie na urządzeniach mobilnych.
Szary Poziomy pasek nawigacyjny
Przykład szarym poziomym pasku nawigacji cienką szarego granicy:
Przykład
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Spróbuj sam " 
Więcej przykładów
responsive Topnav
Jak korzystać z CSS3 zapytań o media, aby stworzyć elastyczne górną nawigację.
responsive Sidenav
Jak korzystać z CSS3 zapytań o media, aby stworzyć elastyczne boczną nawigację.
rozwijane pasek nawigacyjny
Jak dodać menu rozwijanego wewnątrz paska nawigacyjnego.