CSS navigointipalkki

Esimerkki: navigaatiopalkki

Vertikaalinen navigaatiopalkki

Horisontaalinen navigaatiopalkki


Navigaatiopalkki

Helppokäyttöinen navigaatio on tärkeää kaikille verkkosivustoille.

CSS:n avulla voit muuntaa tylsät HTML-valikot kauniiksi navigaatiopalkiksi.

Navigaatiopalkki = linkkilista

Navigaatiopalkille tarvitaan standardeja HTML:ää pohjana.

Esimerkissämme käytämme standardeja HTML-listoja navigaatiopalkin rakentamiseen.

Navigaatiopalkki on yleensä linkkilista, joten <ul> ja <li> -elementit ovat erittäin hyödyllisiä:

Esimerkki

<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>

Kokeile itse!

Nyt poista luettelomerkit sekä ulkopuoliset ja sisäiset reunat (tyhjennys):

Esimerkki

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

Kokeile itse!

Esimerkki selitys:

  • list-style-type: none; - Poista luettelo. Valikko ei tarvitse luettelomerkkejä.
  • Aseta margin: 0; ja padding: 0; Poista selaimen oletusasetukset.

Esimerkissä käytetty koodi on käytetty vertikaalisessa ja horisontaalisessa navigointirivissä, ja seuraavassa luvussa opit lisää.