Izrada horizontalnog menija pomocu liste-2.deo

[Loud]

U prošlom tutorijalu smo naučili kao napraviti jednostavnu horizontalnu listu gdje linkovi mijenjaju boju kada se dođe mišem na njih.

Sada ćemo to zanje malo unaprijediti da poboljšamo izgled naše horizontalne liste i napravimo jedan lijepi horizontalni menu.

Dakle ovo postavite između <style type="text/css"> i </style> pa ćemo redom objašnjavati.

Kod:

#lista
{
margin-left: 0;
padding-left: 0;
}


#lista li
{
display: inline;
list-style-type: none;
}


#lista a
{
color: #FFFFFF;
background-color: #003366;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding: 3px 10px;
}


#lista a:hover
{
color: #FFFFFF;
background-color: #6699CC;
text-decoration: none;
}

Sa

Kod:

#lista
{
margin-left: 0;
padding-left: 0;
}

smo napisali tako da našu listu možemo pomaknuti u lijevu stranu koliko ide da nema razmaka.

Sa

Kod:


#lista li
{
display: inline;
list-style-type: none;
}

smo definirali da se lista (li) u stilu "lista" prikazuje u liniji (display: inline), da nema nikakvih točkica, brojeva ni ničega ispred sebe (list-style-type: none)

Sa

Kod:

#lista a
{
color: #FFFFFF;
background-color: #003366;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding: 3px 10px;
}

smo definirali da svi linkovi u stilu lista budu bijele boje, definirali smo pozadinu, da ne bude podvučen link (text-decoration: none), definirali font te stavili da ima 3px razmaka gore i dolje, te 10px razmaka lijevo i desno (padding: 3px 10px)

Sa

Kod:


#lista a:hover
{
color: #FFFFFF;
background-color: #6699CC;
text-decoration: none;
}

smo odredili kako će se lista ponašati kada se pređe mišem preko linkova. Promijena bojea i da ne bude pocrtano.

I to je to što se tiče novog stila.

Sada možete prekopirati html kod od naše stare liste:

Kod:


<div>
<ul id="lista">
<li><a href="bla1.html">Link 1</a></li>
<li><a href="bla2.html">Link 2</a></li>
<li><a href="bla3.html">Link 3</a></li>
<li><a href="bla4.html">Link 4</a></li>
<li><a href="bla5.hrml">Link 5</a></li>
</ul>
</div>

i pogledati KAKO IZGLEDA OVDE

By tutorijali.net