Izbornik stvoren pomoću popisa i pseudoklasa za linkove.
Formatiranje popisa linkova
Popis formatiramo jednostavnim (ul i li) i kontekstnim selektorima (ul li a i ul ul li a). Primjećujete da ovaj posljednji identificira samo one linkove koji su u li elementu potpopisa (ul ul).
Na linkove u oba popisa postavljamo sljedeća svojstva:
display:block – prikaz linkova jedan ispod drugog
text-decoration – ukidamo podvlačenje linkova
margin – marginom razdvajamo linkove
padding – udaljavamo linkove od ruba njegovog budućeg okvira
width – definiramo širinu linka.
ul, li { list-style: none;/*uklanja grafičku oznaku*/ margin: 0px; padding: 0px; } ul li a, ul li a:visited { display: block; text-decoration: none; margin: 1px; padding: 2px 0px 2px 5px; width: 120px; } ul ul li a, ul ul li a:visited { display: block; text-decoration: none; margin: 1px 1px 1px 15px; padding: 2px 0px 2px 5px; width: 108px; }
Sada imamo formatiran popis i slijedi dodavanje boje i biranje efekta uz linkove.
Možete li već sad naslutiti zašto su margine i, osobito, odmaci definirani na linkovima, a ne na elementima lista, li?
Vidite li možda neku sitnicu vezanu uz dimenzije koja vam djeluje čudno? Potrudite se naći je skicirajući dimenzije formatiranih elemenata. Razlozi za upisane vrijednosti će vam biti također jasni nakon pročitanih sljedećih lekcija.
Često se za sve linkove na stranici definira boja, te posebno boja za posjećene linkove pseudoklasom a:visited. No, želimo da se to odnosi samo na „obične” linkove, one u tekstu, a ne i za linkove u izborniku, za koje želimo da uvijek budu iste boje.
Zbog toga smo za izbornik odmah napisali ul li a, ul li a:visited umjesto samo ul li a (te analogno za potpopise), da kasnije, kad CSS-u dodate navedene opise izgleda „običnih” linkova, ne morate ispravljati pogreške.