Print bookPrint book

Tabovi u pet koraka

Niz "tabova" (jahača) stvoren pomoću popisa i pseudoklasa za linkove.

Site: Nacionalni portal za učenje na daljinu "Nikola Tesla"
Course: Osnove CSS-a
Book: Tabovi u pet koraka
Printed by: Guest user
Date: Saturday, 30 May 2020, 11:12 PM

„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.



CARNet

Prvi korak – definiranje popisa tabova


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

<ul>
<li><a href="1korak.html">1. korak</a></li>
<li><a href="2korak.html">2. korak</a></li>
<li><a href="3korak.html">3. korak</a></li>
<li><a href="4korak.html">4. korak</a></li>
<li><a href="5korak.html">5. korak</a></li>
</ul>

koji u prikazu daje linkove nanizane jedan ispod drugog.

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

#jahaci li {
display: inline; /* postavlja popis u redak */
}

koji se dodaje na nenumerirani popis:

<ul id="jahaci">
<li><a href="1korak.html">1. korak</a></li>
<li><a href="2korak.html">2. korak</a></li>
<li><a href="3korak.html">3. korak</a></li>
<li><a href="4korak.html">4. korak</a></li>
<li><a href="5korak.html">5. korak</a></li>
</ul>

č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.



CARNet

Drugi korak – oblikovanje popisa

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.

#jahaci {
  color: #000;
  border-bottom: 2px solid #455372;
    /* linija razgraničenja od sadržaja */
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 1px;
  padding-left: 30px;
}

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

<ul id="jahaci">
  <li><a href="1korak.html">1. korak</a></li>
  <li><a href="2korak.html">2. korak</a></li>
  <li><a href="3korak.html">3. korak</a></li>
  <li><a href="4korak.html">4. korak</a></li>
  <li><a href="5korak.html">5. korak</a></li>
</ul>

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

   
CARNet

Treći korak – oblikovanje jahača

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.

#jahaci li a {
  color: #000;
  background: #d9dbe1;
  border: 2px solid #455372; /* okvir jahača */
  padding: 3px 5px 1px 5px;
  margin: 0px;
  text-decoration: none; /* bez podcrtavanja */
}

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.

   
CARNet

Četvrti korak – dodavanje dinamičkog efekta

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.

#jahaci li a:hover {
  border-bottom-color: white;
  background-color: #eee;
  color: #455372;
}
#jahaci li a:active {
  color: #c00;
}

Rezultat primjene pseudoklase vidljiv je u sljedećem prikazu:

   
CARNet

Peti korak – oblikovanje aktivnog jahača

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:

#aktivni {
  color: #000;
  background: #fff;
  border-bottom-color: white;
}

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

<ul id="jahaci">
  <li><a href="1korak.html">1. korak</a></li>
  <li><a href="2korak.html">2. korak</a></li>
  <li><a href="3korak.html">3. korak</a></li>
  <li><a href="4korak.html">4. korak</a></li>
  <li><a id="aktivni" href="5korak.html">
    5. korak</a></li>
</ul>

Konačan izgled navigacije:

Cjelokupna CSS uputa:

#jahaci {
  color: #000;
  border-bottom: 2px solid #455372;
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding: 1px;
  padding-left: 30px;
}
#jahaci li {
  display: inline;
}
#jahaci li a {
  color: #000;
  background: #d9dbe1;
  border: 2px solid #455372;
  padding: 3px 5px 1px 5px;
  margin: 0px;
  text-decoration: none;
}
#jahaci li a:hover {
  border-bottom: 2px solid white;
  background-color: #eee;
  color: #455372;
}
#jahaci li a:active {
  color: #c00;
}
#jahaci li a#aktivni {
  color: #000;
  background: #fff;
  border-bottom: 2px solid white;
}
  • 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.
   
CARNet