Pasek nawigacyjny CSS
Demo: paski nawigacyjne
Pionowy
Paski nawigacyjne
Posiadanie łatwej w obsłudze nawigacji jest ważne dla każdej witryny internetowej.
Dzięki CSS możesz przekształcić nudne menu HTML w dobrze wyglądające paski nawigacyjne.
Pasek nawigacyjny = lista linków
Pasek nawigacyjny wymaga standardowego kodu HTML jako podstawy.
W naszych przykładach zbudujemy pasek nawigacyjny ze standardowej listy HTML.
Pasek nawigacyjny to w zasadzie lista linków, więc użycie elementów <ul> i <li> ma sens:
Przykład
<ul>
<li><a href="default.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>
Teraz usuńmy z listy wypunktowania, marginesy i dopełnienie:
Przykład
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Wyjaśnienie przykładu:
list-style-type: none;
- Usuwa kule. Pasek nawigacyjny nie wymaga znaczników listy- Ustawianie
margin: 0;
ipadding: 0;
usuwanie domyślnych ustawień przeglądarki
Kod w powyższym przykładzie jest standardowym kodem używanym zarówno w pionowych, jak i poziomych paskach nawigacyjnych, o którym dowiesz się więcej w następnych rozdziałach.