Descriere: Meniu lista CSS
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
Tutorialul:
Un lucru des subestimat, sau omis, cand vine vorba de CSS, este flexibilitatea lui cand este aplicat pe codul, de altfel static, (X)HTML. Desi pare amuzant, cand sunt folosite in cod (X)HTML, listele sunt doar... liste! Dar, cu ajutorul css-ului, putem realiza din listele inerte ale html-ului niste meniuri usoare, atragatoare si chiar dinamice.
De ce am ales listele (<li>) ?
La modul simplu, putem spune ca prin flexibilitatea css-ului, putem stiliza listele intr-un mod creativ. Iata cateva din avantajele folosirii listelor:
Cod: Selectaţi tot
sunt extrem de simple ca functionare, si pot fi aranjate aproape in orice mod.
pentru ca cel mai bine se pricep la listari, si putem obtine un meniu de tip lista foarte usor
pot fi folosite intr-un fel de "bucla" (loop)... Atunci cand avem mai multe elemente de listat intr-o pagina, folosim tagurile <ul> si <li>, stilizate cu css.
Primul exemplu:
Prima data vom face o coloana, apoi modificam un pic html-ul, si apoi aplicam stilul css. Mai intai, trebuie sa punem linkurile (meniul) intr-o lista si intr-un div. Acum, meniul nostru arata asa:
Cod: Selectaţi tot
<a href="#">Link 1</a> <br>
<a href="#">Link 2</a> <br>
<a href="#">Link 3</a> <br>
<a href="#">Link 4</a> <br>
<a href="#">Link 5</a> <br>
<a href="#">Link 6</a> <br>
Cod: Selectaţi tot
<div class="menu">
<ul>
<li><a href="#">Link 1</a> </li>
<li><a href="#">Link 2</a> </li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
Cod: Selectaţi tot
.menu {
padding: 0px;
margin: 0px;
}
Cod: Selectaţi tot
.menu ul {
list-style: none;
padding: 0px;
margin: 0px;
text-align: left;
}
Cod: Selectaţi tot
.menu li {
border-top: 5px solid #E9EFE5;
}
Cod: Selectaţi tot
.menu a {
display: block;
background-color: #A8BE96;
color: #000;
text-decoration: none;
width: 100%;
border-left: 15px solid #4F633F;
padding-left: 2px;
}
Iata o ilustratie, pentru a intelege mai bine: In afara de asta, am stabilit si culoarea linkurilor ca fiind nergu (color: #000;), am dezactivat sublinierea automata a linkurilor (text-decoration: none;) si am inlaturat si un posibil bug. Fara "width: 100%;" de multe ori nu se afiseaza corect.
De asemenea, mai folosim un truc, si anume marginea din partea stanga. Obtinem astfel, un fel de bullet stilizat. Padding-ul este adaugat pentru evitarea suprapunerii textului pe bullet-ul creat astfel.
Cod: Selectaţi tot
.menu a:hover {
text-decoration: none;
color: #fff;
background-color: #000;
border-left: 15px solid #EFB52B;
}