Poziomy pasek nawigacyjny CSS
Poziomy pasek nawigacyjny
Poziomy pasek nawigacyjny można utworzyć na dwa sposoby. Korzystanie z wbudowanych lub pływających elementów listy.
Wbudowane elementy listy
Jednym ze sposobów na zbudowanie poziomego paska nawigacyjnego jest określenie elementów <li> jako wbudowanych, oprócz „standardowego” kodu z poprzedniej strony:
Przykład
li
{
display: inline;
}
Przykład wyjaśniony:
display: inline;- Domyślnie elementy <li> są elementami blokowymi. Tutaj usuwamy podziały wierszy przed i po każdym elemencie listy, aby wyświetlić je w jednym wierszu
Elementy ruchomej listy
Innym sposobem tworzenia poziomego paska nawigacyjnego jest unoszenie elementów <li> i określenie układu linków nawigacyjnych:
Przykład
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Przykład wyjaśniony:
float: left;- Użyj pływaka, aby elementy blokowe unosiły się obok siebiedisplay: block;- Pozwala nam określić dopełnienie (i wysokość, szerokość, marginesy itp., jeśli chcesz)padding: 8px;- Określ trochę dopełnienia między każdym elementem <a>, aby wyglądały dobrzebackground-color: #dddddd;- Dodaj szary kolor tła do każdego <a> elementu
Wskazówka: dodaj kolor tła do <ul> zamiast każdego elementu <a>, jeśli chcesz mieć kolor tła o pełnej szerokości:
Przykład
ul
{
background-color: #dddddd;
}
Przykłady poziomego paska nawigacyjnego
Utwórz podstawowy poziomy pasek nawigacyjny z ciemnym kolorem tła i zmień kolor tła linków, gdy użytkownik najedzie na nie myszą:
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;
}
Aktywne/bieżące łącze nawigacyjne
Dodaj „aktywną” klasę do bieżącego linku, aby użytkownik wiedział, na której stronie się znajduje:
Przykład
.active {
background-color: #04AA6D;
}
Łącza wyrównane do prawej
Wyrównaj łącza do prawej, przesuwając elementy listy w prawo ( 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>
Przegrody graniczne
Dodaj border-rightwłaściwość do <li>, aby utworzyć dzielniki łączy:
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;
}
Naprawiono pasek nawigacyjny
Spraw, aby pasek nawigacyjny pozostawał na górze lub na dole strony, nawet gdy użytkownik przewija stronę:
Naprawiono górę
ul {
position: fixed;
top: 0;
width: 100%;
}
Naprawiono dół
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Uwaga: Stała pozycja może nie działać poprawnie na urządzeniach mobilnych.
Szary poziomy pasek nawigacyjny
Przykład szarego poziomego paska nawigacyjnego z cienką szarą obwódką:
Przykład
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Przyklejony pasek nawigacyjny
Dodaj position: sticky;do <ul>, aby utworzyć lepki pasek nawigacyjny.
Przyklejony element przełącza się między względnym a stałym, w zależności od pozycji przewijania. Jest pozycjonowany względem czasu, aż dana pozycja przesunięcia zostanie osiągnięta w rzutni - wtedy "przykleja się" w miejscu (jak position:fixed).
Przykład
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Uwaga: Internet Explorer nie obsługuje pozycjonowania przyklejonego. Safari wymaga prefiksu -webkit- (patrz przykład powyżej). Musisz również określić co najmniej jeden z top, lub right, aby pozycjonowanie przyklejone działało.bottomleft
Więcej przykładów
Responsywne Topnav
Jak używać zapytań o media CSS, aby stworzyć responsywną górną nawigację.
Responsywne Sidenav
Jak używać zapytań o media CSS do tworzenia responsywnej nawigacji bocznej.
Rozwijany pasek nawigacyjny
Jak dodać menu rozwijane na pasku nawigacyjnym.
Słyszałeś kiedyś o W3Schools Spaces ? Tutaj możesz stworzyć swoją stronę od podstaw lub skorzystać z szablonu i hostować ją za darmo.
Rozpocznij za darmo ❯* Nie wymagamy karty kredytowej