CSS izbornik: Definiranje popisa linkova

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.