Tutorijali.Net

Tutorijali

	Oglasi

Anketa

CSS TUTORIJALI

Izrada horizontalnog menija pomoću liste - 3.dio

U prošlom tutorijalu naučili smo kako napraviti jednostavni menu koji koji mijenja boju pozadine kada se pređe mišem preko linkova.

Sada ćemo napraviti slično tako ali još malo bolje.

Dodajte ovo između <style type="text/css"> i </style> pa ćemo objasniti.

 #lista

{

padding-left: 0;

margin-left: 0;

}

#lista li

{

list-style-type: none;

display: inline;

}

#lista a

{

font-family: Verdana;

font-weight: bold;

font-size: 12px;

padding: 2px 5px 2px 5px;

border-left: 10px solid #000066;

background: #006699;

text-decoration: none;

color: #FFCC33;

}

#lista a:hover

{

border-color: #6699CC;

color: #FFFFFF;

background: #000000;

}

Gotovo je sve isto kao i u prošlom tutorijalu pa nema potrebe da objašnjavamo što koji kod radi. Reći ću samo za ono što je nadodano da bi se dobili ovi kvadratići sa strane.

U #lista a smo nadodali ovaj kod

border-left: 10px solid #000066;  

Što pravi border širine 10 pixela sa lijeve strane. To vam je ovaj kvadratić.

zatim smo u #lista a:hover nadodali ovo:

border-color: #6699CC;  

odnosno da onaj border od 10px promijeni boju u svijetlo plavu.

Eto, to bi bilo sve. Ne zaboravite u body dio stranice napraviti listu:

<div>

<ul id="lista">

<li>

<a href="bla.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.html">Link 5</a></li>

</ul>

</div>

Evo kako to izgleda u akciji.

Ako vam nešto nije jasno pitajte na forumu.

Sljedeći tutorijal: Overflow teksta unutar div-a

_________________________

Autor ovog tutorijala: Gogy