Tabovi u pet koraka

U sljedećih će nekoliko lekcija biti zorno prikazan i potanko objašnjen jednostavan način izrade navigacijskih elemenata koji bi kao jedinstvena navigacijska cjelina ili sustav trebali podsjećati na jahače, odnosno „tabove”, kako im je danas uvriježeno ime, uvezeno iz suvremenog internetskog jezika. Krajnji je cilj doći do sljedećeg sustava za navigaciju.

Jahači su već duže vrijeme jedno od češćih rješenja internetske navigacije. Iako se danas, dakako, može pronaći cijeli niz složenih rješenja njihove izrade, među kojima su naročito popularna ona koja kombiniraju CSS i grafičke elemente, u ovoj je lekciji prikazana uporaba isključivo CSS‑a. Valja posebno napomenuti da je ovakav pristup izabran ne samo zbog jednostavnosti već i radi potpuno jednakog prikaza u web preglednicima koji podržavaju CSS, što se često ne postiže kod primjene složenih rješenja.

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

• Moguće je da se jahači na vašem ekranu međusobno preklapaju. Razlog tome je premala rezolucija vašeg monitora za zadani prikaz jahača, pa ju, ukoliko želite, prilagodite u postavkama vašeg računala.

Osnovu našeg rješenja čini nenumeriran popis linkova – koriste se <ul> i <li> tagovi -

koji u prikazu daje linkove nanizane jedan ispod drugog.

Da bi se linkovi prikazali jedan do drugog, uvodi se novi selektor:

koji se dodaje na nenumerirani popis:

čime se u prikazu dobije željeni raspored linkova.

• „Trik” s imenovanjem jedinstvenog dijela stranice, što izbornik obično jest, često olakšava definiranje stilova. Objasnite što bi se moglo dogoditi da stil elementa popisa, li, nije definiran kontekstno, unutar elementa #jahači.
• Uputa: na stranicu iza popisa tabova dodajte malo teksta i još jedan popis.
• Jednako kao u ovom poglavlju, ova bi tehnika mogla koristiti i u prethodnom.

U ovom se koraku linkovima dodaje pozicioniranje (smještanje), boja znakova te crta koja se koristi za razgraničenje od sadržaja. Smještanje se uspostavlja marginama i odmacima, a kao crta širine 2 piksela upotrebljava se donja granica nesortiranog popisa.

U HTML kôdu popisa i dalje nije potrebno ništa mijenjati jer je cijela uputa definirana implicitno putem atributa id nenumeriranog popisa:

čime se u prikazu dobije linija s linkovima poredanim jedan do drugog.

Izgled pojedinog jahača uspostavlja se CSS uputom izvedenom grupiranjem. Jedan jahač prikazuje jedan link, a izgled se može prilagoditi uporabom selektora #jahaci li a.

Ovako definirana CSS uputa rezultira konačnim izgledom jahača. U sljedećem koraku preostaje dodati dinamiku promjene izgleda linka CSS uputi i završiti sustav.

Dinamička promjena izgleda linka pripada kategoriji kojoj je važno posvetiti posebnu pozornost. Naime, osim atraktivnosti kojoj se obično teži, promjena izgleda ima i funkcionalan značaj jer korisniku olakšava izbor mjesta na koja može kliknuti.

Primjenu dinamičkih elemenata na linkovima, kao i u prethodnom primjeru, postižemo upotrebom pseudoklasa active i hover – da bismo promijenili izgled linka bilo klikom, bilo prelaskom miša preko linka.

Rezultat primjene pseudoklase vidljiv je u sljedećem prikazu:

Za kraj je potrebno dodati efekt koji boju pozadine na aktivnom jahaču čini jednakom boji stranice. To se postiže upotrebom još jednog CSS identifikatora:

Ova klasa se dodaje na link koji pokazuje na trenutnu stranicu (u našem primjeru na peti korak).

Konačan izgled navigacije:

Cjelokupna CSS uputa:

• Na vašoj stranici na kojoj ste uz čitanje ovog poglavlja pratili izgradnju skupa jahača proglasite jedan jahač aktivnim. Ostali linkovi vodit će na druge stranice, koje možete stvoriti iz ove prve, a od kojih će svaka imati svoj aktivni jahač.
  
  Prava je snaga ovakvog načina rada vidljiva, ponovno, kad se promjena sadržaja kartice obavlja JavaScriptom, te skripta automatski mijenja aktivni jahač. Automatska promjena aktivnog jahača može se postići i skriptama sa serverske strane, što pripada naprednijim tehnikama izrade web sjedišta.