Izrada horizontalnog menija pomocu liste-3.deo

Ići dole

Izrada horizontalnog menija pomocu liste-3.deo

Počalji od Loud taj Sub Feb 20, 2010 3:05 pm

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
Kod:
<style type="text/css"> i </style>
pa ćemo objasniti.

Kod:
#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

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:

Kod:
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:

Kod:
<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 izgleda OVDE

By tutorjiali.net

_________________________________





avatar
Loud
Administrator
Administrator

Broj poruka : 1118
Datum upisa : 23.01.2010
Godina : 21

Pogledaj profil korisnika http://svettutorijala.forumotion.net

Nazad na vrh Ići dole

Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu