Panel nawigacyjny poziomy CSS

Pozioma nawigacja

Istnieją dwa sposoby stworzenia poziomej nawigacji: używającInlinelubFloatElementy listy.

Inline list element

Jednym z sposobów stworzenia poziomej nawigacji jest ustawienie elementów <li> jako inline, oprócz kodu "standardowego" z poprzedniego rozdziału:

Przykład

li {
  display: inline;
}

Spróbuj sam

Przykład wyjaśnienia:

display: inline; - Domyślnie, elementy <li> są elementami blokowymi. Tutaj usuwamy znaki nowej linii przed i po każdym elemencie listy, aby mogły one być wyświetlane w jednym wierszu.

Float list element

Innym sposobem stworzenia poziomej nawigacji jest float elementów <li> i określenie układu dla linków nawigacyjnych:

Przykład

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Spróbuj sam

Przykład wyjaśnienia:

  • float: left; - Użyj float, aby blokowe elementy przeciągały się w pobliżu siebie
  • display: block; - Wyświetlanie linków jako blokowych elementów umożliwia kliknięcie całego obszaru linku (nie tylko tekstu) i pozwala na określenie wypełnienia (jeśli jest to konieczne, również wysokość, szerokość, marginesy itp.)
  • padding: 8px; - Ulepszenie wyglądu blokowych elementów
  • background-color: #dddddd; - Dodaj szary kolor tła do każdego elementu

Wskazówka:Jeśli chcesz mieć pełną szerokość koloru tła, dodaj background-color do <ul>, a nie do każdego elementu <a>:

Przykład

ul {
  background-color: #dddddd;
}

Spróbuj sam

Przykład pionowej nawigacji

Utwórz podstawową pionową nawigację z ciemnym tłem i zmień kolor tła linku, gdy użytkownik przeniesie nad nim 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;
}
/* Zmień kolor linku na #111 (czarny) podczas nawigacji myszą */
li a:hover {
  background-color: #111;
}

Spróbuj sam

Aktywny/aktualny link nawigacyjny

Dodaj klasę "active" do bieżącego linku, aby użytkownik wiedział, na której stronie się znajduje:

Przykład

.active {
  background-color: #4CAF50;
}

Spróbuj sam

Wyjustowane linki

Przez wyprostowanie elementów listy w prawo, linki są wyjustowane do prawej (float:right;）：

Przykład

<ul>
  <li><a href="#home">Strona główna</a></li>
  <li><a href="#news">Wiadomości</a></li>
  <li><a href="#contact">Kontakt</a></li>
  <li style="float:right"><a class="active" href="#about">O nas</a></li>
</ul>

Spróbuj sam

separatory krawędzi

Przenieś border-right Atrybut dodaj do <li>, aby utworzyć separator linków:

Przykład

/* Dodaj szarą prawą krawędź do wszystkich elementów listy, z wyjątkiem ostatniego (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Spróbuj sam

Stała nawigacja

Utrzymuje nawigację na górze lub na dole strony, nawet jeśli użytkownik przewija stronę:

Przyklejona do góry

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Spróbuj sam

Przyklejona do dna

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Spróbuj sam

Uwaga:Stała pozycja może nie działać poprawnie na urządzeniach przenośnych.

Pozioma nawigacja szara

Przykład poziomej nawigacji szarej z delikatnym szarym obramowaniem

Przykład

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Spróbuj sam

lepką nawigację

dodaj do <ul> position: sticky;aby utworzyć lepką nawigację.

Elementy lepkie przełączają się między względem a stałym w zależności od pozycji przewijania. Jest względnie umieszczony, aż napotka określoną pozycję offsetową w polu widzenia - następnie "przylega" do odpowiedniej pozycji (np. position:fixed).

Przykład

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Spróbuj sam

Uwaga:Internet Explorer, Edge 15 i wcześniejsze wersje nie obsługują przyciągającej pozycji. Safari wymaga przedrostka -webkit- (patrz powyższy przykład). Musisz również指定 top,right,bottom lub left Przynajmniej jedno, aby przyciągająca pozycja działała.

Więcej przykładów

Nawigacja górna responsywna
Jak użyć zapytań media CSS do tworzenia responsywnej nawigacji górnej.
Nawigacja boczna responsywna
Jak użyć zapytań media CSS do tworzenia responsywnej nawigacji bocznej.
Nawigacja rozwijana
Jak dodać menu rozwijane do paska nawigacji.