Panel nawigacyjny pionowy CSS

polecane kursy:

pionowa nawigacja wstępna

Przykład

width: 200px;
  li a {
  Możesz również ustawić szerokość <ul> i usunąć szerokość <a>, ponieważ, gdy są wyświetlane jako blokowe elementy, zajmują całą dostępną szerokość. To spowoduje, że wynik będzie taki sam jak w poprzednim przykładzie:
}

Spróbuj sam!

Aby zbudować pionową nawigację wstępną, oprócz kodu z poprzedniego rozdziału, można również ustawić styl elementów <a> w liście:

  • li a { przykład wyjaśnienia:
  • Możesz również ustawić szerokość <ul> i usunąć szerokość <a>, ponieważ, gdy są wyświetlane jako blokowe elementy, zajmują całą dostępną szerokość. To spowoduje, że wynik będzie taki sam jak w poprzednim przykładzie: - Wyświetlanie linków jako blokowe elementy umożliwia kliknięcie całego obszaru linku (nie tylko tekstu), możemy również określić szerokość (jeśli potrzebne, również wewnętrzną margines, zewnętrzny margines, wysokość itp.).

- Domyślnie, blokowe elementy zajmują całą dostępną szerokość. Musimy określić szerokość 60 pikseli.

Przykład

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Możesz również ustawić szerokość <ul> i usunąć szerokość <a>, ponieważ, gdy są wyświetlane jako blokowe elementy, zajmują całą dostępną szerokość. To spowoduje, że wynik będzie taki sam jak w poprzednim przykładzie:
} 
width: 200px;
  li a {
}

Spróbuj sam!

width: 60px;

przykład pionowej nawigacji wstępnej

Przykład

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  stworzyć pionową nawigację wstępną z podstawowym kolorem tła szarym i zmienić kolor tła linku, gdy użytkownik przeniesie nad nim kursor:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* Zmiana koloru linku podczas nawigacji */
  li a:hover {
  background-color: #4CAF50;
}

Spróbuj sam!

background-color: #555;

aktywny/obecny link nawigacyjny

Przykład

dodaj klasę "active" do bieżącego linku, aby użytkownik wiedział, na której stronie się znajduje:
  .active {
  background-color: #4CAF50;
}

Spróbuj sam!

color: white;

centrować linki oraz dodać ramkę text-align:center do <li> lub <a>, aby wyśrodkować linki.

dodaj border dodaj atrybut do <ul>, aby dodać ramkę wokół paska nawigacji. Jeśli chcesz również dodać ramkę wewnątrz paska nawigacji, dodaj do wszystkich elementów <li> border-bottomwyjączając ostatni element:

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!

Pełnowysokościowa pionowa nawigacja przylepna

Utwórz pełnowysokościową nawigację boczne przylepną:

Przykład

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Pełna wysokość */
  position: fixed; /* Robi go przylepnym, nawet podczas przewijania */
  overflow: auto; /* Jeśli zawartość bocznej kolumny jest zbyt duża, włącz paski przewijania */
}

Spróbuj sam!

Uwaga:Możliwe, że ten przykład nie działa poprawnie na urządzeniach przenośnych.