Print bookPrint book

CSS izbornik

Izbornik stvoren pomoću popisa i pseudoklasa za linkove.

Site: Nacionalni portal za učenje na daljinu "Nikola Tesla"
Course: Osnove CSS-a
Book: CSS izbornik
Printed by: Guest user
Date: Sunday, 31 May 2020, 12:25 AM

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.


CARNet

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.

CARNet

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

Dodatno oblikovanje popisa

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.

ul, li {
  list-style: none;
  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;
  color: #336;            /* boja linkova */
  font-weight: bold;  /* podebljana slova */
  border-left: 6px solid #336; /* granica */
}
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;
  color: #336;            /* boja linkova */
  font-weight: bold;  /* podebljana slova */
  border-left: 4px solid #336; /* granica */
}

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

Dodavanje dinamičkog efekta


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.

ul, li {
list-style: none;
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;
color: #336;
font-weight: bold;
border-left: 6px solid #336;
}

/* dinamički efekt za izbornik */
ul li a:hover {
text-decoration: none;
border-left-color: #ccf;
}

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;
color: #336;
font-weight: bold;
border-left: 4px solid #336;
}
/* dinamički efekt za podizbornik */
ul ul li a:hover {
text-decoration: none;
border-left-color: #ccf;
}

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.




CARNet