CSS izbornik

Izrada izbornika web sjedišta HTML kôdom može zahtijevati desetke linija kôda, formatiranje s pomoću tablice i dodavanje raznih efekata korištenjem JavaScripta. Ovdje smo za vas pripremili jednostavan CSS izbornik koji uključuje razne efekte, od mijenjanja boja do formatiranja podizbornika, i to sve bez navedenih elemenata.

Izbornik je sastavljen od nekoliko linkova tipičnih za male tvrtke. Sastavni dio izbornika je podizbornik, ovdje prikazan samo za jedan nadređen link. Konačan izgled koji želimo postići dan je sljedećim prikazom:

U sljedeće tri lekcije vidjet ćemo kako oblikovati ovakav izbornik.

• Preporučamo vam da, dok čitate ovo poglavlje, na svom računalu polako gradite isti ili sličan izbornik.

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:

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

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.

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.

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.
   

Uz razmještanje elemenata na stranici, izbor boja i dodavanje ukrasa pripadaju poslu web dizajnera. Ovdje se može vidjeti snaga CSS-a, jer web dizajner, bez obzira na napisan kôd, mijenjanjem CSS-a u potpunosti može promijeniti izgled popisa.

Popis ćemo obojiti plavom bojom, znakove ćemo podebljati, a kao ukras i podlogu za dinamički efekt, koristit ćemo lijevu granicu linka. Postavit ćemo je na debljinu od 6 piksela za linkove glavnog izbornika, odnosno 4 piksela za linkove podizbornika, definirati liniju (vrijednost solid) i postaviti joj boju koju smo dodijelili slovima.

Predefinirana vrijednost širine granice linka je 0 piksela, tako da ovdje trebamo postaviti debljinu samo lijeve granice. Ovim smo dobili sljedeći prikaz:

Oblikovani popis je tu. Ono što nam slijedi je završavanje dodavanjem dinamičkog efekta.

• Znate li sad zašto su u definiciju stila uvrštene pseudoklase a:visited? Ako sad to ne možete otkriti, isprobajte definiciju stila bez tih pseudoklasa.

Iako su linkovi gotovi i funkcionalni, nedostaje im nešto što u današnje vrijeme uobičajeno susrećemo kod većine izbornika. Pomicanjem pokazivača miša, korisnici su navikli da im nekakav efekt označi iznad kojeg linka se nalazi pokazivač. Takvi efekti, osim uljepšavanja, imaju i ulogu olakšavanja orijentacije i snalaženja među linkovima.

Dinamičke efekte postižemo dodavanjem pseudoklasa u stil. Upotrijebit ćemo pseudoklasu hover, a mijenjat ćemo boju lijeve granice elementa.

Dodavanjem ovih klasa dobili smo konačan prikaz:

• Za vježbu stavite kao dinamički efekt promjenu boje pozadine umjesto promjene boje ruba. Dodatno, pokušajte istovremeno napraviti obje promjene.

Na kraju još trebate umjesto linkova koji vode na početak iste stranice u HTML dokumentu postaviti linkove koji vode na odgovarajuće stranice.