Acest tutorial
prezinta cum se creaza 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.
rezulta o lista verticala cu link-urile respective, si cu niste bulinute in fata.
<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>
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>
Cod: CSS elimina bulinutele, si spatiul\marginea.=#meniu ul
#meniu ul {
margin: 0;#meniu ul {
margin: 0;
padding: 0;
list-style-type:
none;
list-style-image: none;
}
Cod: CSS transforma lista noastra din verticala in
orizontala.=#meniu li
#meniu ul {
margin: 0;
padding: 0;
list-style-type:
none;
list-style-image: none;
}
#meniu li {
display: inline;
}
Cod: CSS eliminam subliniere
si dam o alta culoare.=#meniu a
#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;
}
Cod CSS: schimba culoarea cand trecem cu mouse-ul peste link-urile din meniu,=#meniu a:hover
#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.
