Navigační lišta CSS
Demo: Navigační lišty
Navigační lišty
Mít snadno použitelnou navigaci je důležité pro jakýkoli web.
Pomocí CSS můžete přeměnit nudné HTML nabídky na dobře vypadající navigační panely.
Navigační lišta = seznam odkazů
Navigační panel potřebuje jako základ standardní HTML.
V našich příkladech vytvoříme navigační panel ze standardního seznamu HTML.
Navigační panel je v podstatě seznam odkazů, takže použití prvků <ul> a <li> dává dokonalý smysl:
Příklad
<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>
Nyní odeberme ze seznamu odrážky, okraje a odsazení:
Příklad
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Vysvětlený příklad:
list-style-type: none;
- Odstraňuje kulky. Navigační panel nepotřebuje značky seznamu- Nastavte
margin: 0;
apadding: 0;
odeberte výchozí nastavení prohlížeče
Kód ve výše uvedeném příkladu je standardní kód použitý ve vertikálních i vodorovných navigačních lištách, o kterých se dozvíte více v dalších kapitolách.