CSS Bară de navigare. Listă de legături.
Partajeaza in Google Classroom
Teorie: Descriere video Descarcă PDF
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.