Kada želite napraviti jednostavnu, ali efektnu navigaciju, najbolje je koristiti
css. U tu se svrhu ponekad koristi i javascript, ali css je puno jednostavniji i
zbog toga i korišteniji. Ova se tehnika nametnula kao vodeća i zbog velikog velike
mogućnosti kontrole izgleda.
Ovdje možete vidjeti gotov rad.
Prvo moramo napraviti listu koja će nam poslužiti kao navigacija, a oblikovat ćemo ju, naravno, css-om. Kod za navigaciju je jednostavan, samo ću ga napisati, a objašnjenje o korištenju listi možete pronaći ovdje.
<ul class="navigacija">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
Prvo ćemo maknuti općenite oznaki listi i odrediti display inline liste.
#navigacija {
list-style-type: none;
display: inline;
}
Sada ćemo odrediti kako se treba prikazivati običan tekst svake stavke liste. Odredit ćemo boju pozadine, postaviti da svaka stavka bude široka 200px, ima točkast donji rub debeo 1 px, i definirat ćemo joj lijevi padding i donju marginu.
#navigacija li {
background: #dde3c4;
width: 200px;
border-bottom: 1px dotted #000;
margin-bottom: 1px;
padding-left: 5px;
}
Zatim ćemo odrediti kako će stavke izgledati kada će prijeđe strelicom miša preko njih. Promijenit ćemo boju pozadine i debljinu slova.
.navigacija li:hover {
background: #f0f3e2;
font-weight: bold;
}
Na kraju ćemo odrediti kako će izgledati linkovi unutar liste.
.navigacija li a {
color: #168ecd;
text-decoration: none;
}
.navigacija li a:visited {
color: #168ecd;
text-decoration: none;
}
Možete primjetiti da sam samo odredio boju linka, isto kao i linka koji je već bio odabran. Još sam i odredio da link ne bude pocrtan. Možda primjećujete da nisam odredio izgled hover linka, razlog tome je što je on određen u hoveru svake stavke liste (pogledaj pod #navigacija li:hover).
Na sljedećoj stranici možete vidjeti cijeli kod menija.
više na pcchip.hr