CSS Bară de navigare. Bară de navigare verticală.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Pentru a construi o bară de navigare verticală, puteți stila elementele <a> din listă, pe lângă codul de mai sus:
Exemplu:
li a {
display: block;
width: 60px;
}
Exemplu explicat:
display: block; - Afișarea linkurilor ca elemente de block face ca întreaga zonă de legătură să fie clickable (nu doar textul) și ne permite să specificăm width (și padding, margin, height, dacă doriți)
width: 60px; - Elementele de block acceptă în mod implicit întreaga lățime disponibilă. Vrem să specificăm o lățime de 60 de pixeli
Puteți, de asemenea, să setați lățimea <ul> și să eliminați lățimea <a>, deoarece acestea vor prelua lățimea completă disponibilă atunci când sunt afișate ca elemente de block. Acest lucru va produce același rezultat ca exemplul nostru anterior:
Exemplu:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}