Meniu simplu de link-uri

Ok revin cu inca un mic tutorial, imi imaginez ca exista destule pe net dar fac si eu unul cat se poate de simplu. In acest tutorial vom crea un meniu de link-uri ( simplu zis un meniu ), orizontal, folosind HTML si CSS. Pentru inceput creeam un UL ( Unordered List ) adica o lista neordonata, in care elementele listei sunt….link-urile noastre.

<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="produse.html">PRODUSE</a></li>
<li><a href="despre-firma.html">DESPRE NOI</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>

Bun, ceea ce va rezulta codul de mai sus e o lista verticala cu link-urile respective, si cu niste bulinute in fata.Bun pana aici.
Acum va trebui sa integram aceasta lista intr-un DIV, pe care o sa il numim simplu “meniu”.

<div id="meniu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="produse.html">PRODUSE</a></li>
<li><a href="despre-firma.html">DESPRE NOI</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>

Acum vom aplica partea de CSS, pentru inceput sa scapam de bulinute asa ca vom adauga in partea de CSS a paginii noastre web urmatoarele:

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

Codul de mai sus elimina bulinutele, si spatiulmarginea.
Acum mai adaugam o linie de CSS care va transforma lista noastra din verticala in orizontala.

#meniu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#meniu li {
display: inline;
}

Acum, link-urile din meniu fiind…link-uri ele au by default acea culoare specifica lor, adica acel albastru si sublinite, vom adauga inca o linie CSS ca sa eliminam acea subliniere si de ce nu sa le dam o alta culoare.

#meniu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#meniu li {
display: inline;
}
#meniu a {
text-decoration:none;
color: red;
}

De sa nu adaugam si un efect, acela de a-si schimba culoarea cand trecem cu mouse-ul peste link-urile din meniu, asa ca mai adaugam o line CSS.

#meniu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
}
#meniu li {
display: inline;
}
#meniu a {
text-decoration:none;
color: red;
}
#meniu a:hover {
color: yellow;
}

Si meniul nostru e gata de a fi folosit si bineinteles customizat in ce feluri vreti.