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