Panel nawigacyjny CSS

Przykład: nawigacja

Pionowa nawigacja

Pozioma nawigacja


Nawigacja

Przyjazna nawigacja jest ważna dla każdej strony internetowej.

Dzięki CSS możesz przekształcić nudne menu HTML w estetyczną nawigację.

Nawigacja = lista linków

Nawigacja wymaga standardowego HTML jako podstawy.

W naszym przykładzie nawigację zbudujemy za pomocą standardowej listy HTML.

Nawigacja zazwyczaj jest listą linków, więc użycie elementów <ul> i <li> ma sens:

Przykład

<ul>
  <li><a href="index.asp">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 usuń punkty liście oraz marginesy zewnętrzne i wewnętrzne (wypełnienie) z listy:

Przykład

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Spróbuj sam

Wyjaśnienie przykładu:

  • list-style-type: none; - Usuń punkty liście. Pasek nawigacyjny nie wymaga znaczników elementów listy.
  • ustaw margin: 0; i padding: 0; Usuń domyślne ustawienia przeglądarki.

Kod w poprzednim przykładzie jest standardowym kodem używanym w pionowych i poziomych paskach nawigacyjnych, więcej na ten temat dowiesz się w następnym rozdziale.