Pionowy pasek nawigacyjny CSS
Pionowy pasek nawigacyjny
Aby zbudować pionowy pasek nawigacyjny, możesz nadać styl elementom <a> wewnątrz listy, oprócz kodu z poprzedniej strony:
Przykład
li a
{
display: block;
width: 60px;
}
Wyjaśnienie przykładu:
display: block;- Wyświetlanie linków jako elementów blokowych sprawia, że cały obszar linków jest klikalny (nie tylko tekst) i pozwala nam określić szerokość (i dopełnienie, margines, wysokość itp., jeśli chcesz)width: 60px;- Elementy blokowe zajmują domyślnie pełną dostępną szerokość. Chcemy określić szerokość 60 pikseli
Możesz także ustawić szerokość <ul> i usunąć szerokość <a>, ponieważ zajmą one pełną szerokość dostępną podczas wyświetlania jako elementy blokowe. Da to taki sam wynik, jak w naszym poprzednim przykładzie:
Przykład
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Przykłady pionowego paska nawigacyjnego
Utwórz podstawowy pionowy pasek nawigacyjny z szarym 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;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
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;
color: white;
}
Wyśrodkuj linki i dodaj obramowania
Dodaj text-align:centerdo <li> lub <a>, aby wyśrodkować łącza.
Dodaj borderwłaściwość do <ul> dodaj obramowanie wokół paska nawigacyjnego. Jeśli chcesz również obramować wewnątrz paska nawigacyjnego, dodaj a border-bottomdo wszystkich elementów <li>, 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;
}
Stały pionowy pasek nawigacyjny o pełnej wysokości
Utwórz „przyklejoną” nawigację boczną o pełnej wysokości:
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 */
}
Uwaga: ten przykład może nie działać poprawnie na urządzeniach mobilnych.