Izrada horizontalnog menija pomocu liste-3.deo

[Loud]

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