Comunitatea Europa Counter Strike

Scris: **Sâm Iul 19, 2014 12:09 pm**

Nume Tutorial: Meniu lista CSS
Descriere: Meniu lista CSS
Download:
Autor: Anonim
Sursa (Link-ul oficial):

Afiseaza Textul

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.

In trecut, singurele moduri de realizare a unor meniuri animate, atractive, erau fie folosirea javascript-ului, care este destul de greoi si neprietenos cu motoarele de cautare, fie folosirea unor harti de imagini, fie folosirea unor imagini pe post de butoane care mareau dimensiunea paginii. Oricare dintre aceste metode este mult inferioara css-ului.

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>

Aplicand schimbarile despre care spuneam (listele si div-ul), va arata asa:

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>

Urmeaza sa introducem cateva linii si in fisierul css:

Cod: Selectaţi tot

.menu {
  padding: 0px;
  margin: 0px;
}

Asta nu face altceva decat sa ne asigure ca nu se aplica padding sau margine la meniul din div. Daca div-ul nu va fi introdus intr-un alt div sau celula de tabel, poate ar fi bine sa ii specificati si inaltimea si latimea. Sa continuam...

Cod: Selectaţi tot

.menu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  text-align: left;
}

Am obtinut astfel, o distorsionare a modului in care se afiseaza in mod normal listele neordonate (<ul>). Cu ajutorul lui "list-style: none;" scoatem bullet-ul afisat implicit in fata listelor, si apoi scoatem orice padding sau margine aplicate in mod natural de tag-ul <ul>

Cod: Selectaţi tot

.menu li {
  border-top: 5px solid #E9EFE5;
}

Chiar daca proprietatea folosita aici este in mod natural o bordura, in cazul de fata ne va asigura un spatiu intre doua elemente ale meniului.

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

Linia "display: block;" este o functie a css-ului care ne ajuta sa extindem spatiul ocupat de text, pe orizontala in interiorul div-ului, pe toata latimea acestuia.

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

Meniul nu ar avea nici un farmec fara un efect de mouse-over. Asadar obtinem cu aceasta declaratie urmatoarele: textul isi schimba culoarea in alb, fundalul devine negru, iar bullet-ul devine orange.

Comunitatea Europa Counter Strike

[Tutorial CSS] Meniu lista CSS

[Tutorial CSS] Meniu lista CSS