Do listy dodajemy np. dwa elementy które mają klase right
<li class="przepisy"><a href="#">Przepisy
</a></li> <li class="kontakt"><a href="#">Napisz do nas
</a></li> <li class="artykuly"><a href="#">Artykuły
</a></li> <li class="zakupy"><a href="#">Sklep internetowy
</a></li> <li class="right"><a href="#">Prawy One
</a></li> <li class="right"><a href="#">Prawy Two
</a></li>
a w CSSie po
ul#zakl_naw li (na wszelki wypadek, i dla przejrzystości)
Kod
ul#zakl_naw li {
float: left;
height: 21px;
background-color: #B51032;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border: 1px solid #711515;
}
ul#zakl_naw li.right //od tąd dodajemy
{
float: right;
}
Cała moc skryptu polega na tym że dla każdej strony możemy zdefiniować zupełnie inny wygląd dzięki id przy body, np. każda strona może kryć inną kolorystyke.
Robiąc teraz klase
right tracimy wygląd aktywnej zakładki, ale zmieniając kod na taki(że tak powiem indywidualny):
<li class="zakupy"><a href="#">Sklep internetowy
</a></li> <li class="prawy1"><a href="#">Prawy One
</a></li> <li class="prawy2"><a href="#">Prawy Two
</a></li>
i dodając do CSSa
Kod
ul#zakl_naw li {
float: left;
height: 21px;
background-color: #B51032;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border: 1px solid #711515;
}
ul#zakl_naw li.prawy1, ul#zakl_naw li.prawy2 //to jest dodane
{
float: right;
}
...
body#przepisy li.przepisy, body#kontakt li.kontakt,
body#artykuly li.artykuly, body#zakupy li.zakupy, body#prawy1 li.prawy1, body#prawy2 li.prawy2 { // tu sa dopisane klasy
border-bottom: 1px solid #fff;
color: #000000;
background-color: #FFFFFF;
}
body#przepisy li.przepisy a:link, body#przepisy li.przepisy a:visited, body#kontakt li.kontakt a:link,
body#kontakt li.kontakt a:visited,
body#artykuly li.artykuly a:link,
body#artykuly li.artykuly a:visited, body#zakupy li.zakupy a:link,
body#zakupy li.zakupy a:visited, body#prawy1 li.prawy1 a:link, body#prawy1 li.prawy1 a:visited, body#prawy2 li.prawy2 a:link, body#prawy2 li.prawy2 a:visited{ // tu sa dopisane klasy
color: #000000;
background-color: #FFFFFF;
}
Otrzymamy to co chcemy.
Btw. skrypt jest z książki CSS Antologia, a autorka owej ksiązki ów pomysł zaczerpneła z
http://unraveled.com/projects/css_tabs/