CSS izbornik

Izbornik stvoren pomoću popisa i pseudoklasa za linkove.

Definiranje popisa linkova

 

Prvi korak do cilja je definiranje popisa linkova. Popisi se zbog svojih CSS svojstava redovito koriste za kreiranje izbornika. Popis glavnog izbornika sastoji se od četiri linka:

<ul>
<li><a href="#">Naslovnica</a></li>
<li><a href="#">Proizvodi</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Kako je podizbornik popis podređen jednom članu popisa izbornika, linkove podizbornika dodajemo kao još jedan popis unutar nadređenog člana.

<ul>
<li><a href="#">Naslovnica</a></li>
<li><a href="#">Proizvodi</a>
<ul>
<li><a href="#">Proizvod 1</a></li>
<li><a href="#">Proizvod 2</a></li>
<li><a href="#">Proizvod 3</a></li>
</ul>
</li>
<li><a href="#">O nama</a></li>
<li><a href="#">Kontakt</a></li>
</ul>

Sada imamo definiran popis i slijedi njegovo formatiranje. Ovim smo završili izmjene HTML kôda, jer ćemo daljnje formatiranje izvršiti isključivo CSS-om.

Jedina će promjena u HTML kôdu biti na kraju, kad ćemo umjesto linkova koji vode na istu stranicu staviti prave linkove.

CARNet