CSS Bară de navigare. Listă de legături.

Susține Lectii-Virtuale!

Bare de navigare

Navigarea ușor de utilizat este importantă pentru orice site web.
Cu CSS puteți transforma meniuri HTML plictisitoare în bare de navigare cu aspect bun.

Bară de navigare = Listă de legături

O bara de navigare are nevoie de HTML standard ca bază.
În exemplele noastre vom construi bara de navigare dintr-o listă HTML standard.
O bara de navigare este practic o listă de legături, astfel încât utilizarea elementelor <ul> și <li> au sens perfect:

Exemplu:

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">Știri</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">Despre</a></li>
</ul>

Acum, să eliminăm bullets și margins și padding din listă:

Exemplu:

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

Exemplu explicat:

list-style-type: none; - Îndepărtează bullets. O bară de navigare nu are nevoie de markeri de listă
Setați margin: 0; padding: 0; pentru a elimina setările implicite ale browserului
Codul din exemplul de mai sus este codul standard utilizat atât în barele de navigație verticale, cât și în cele orizontale.