Zelim napraviti neki interactivni link . Stvar je sljedeca kad je neka stranica aktivna njen link mora imati drukciji stil s time kada se ode na drugi link taj predhodni se mora vratiti u prvobitno stanje . Ustvari vizualno bi trebalo izgledati poput taba
Ako neko zna gdije sam pogrijesio molim za pomoc unaprijed hvala. Nadam se da ce ovaj primjer moci posluziti i drugima... Hvala jos jednom..
<ul class="lista">
<?php
$stanjeLinka = "";
$aktivan = "aktivanCSS ";
$neaktivan = "neaktivanCSS ";
switch($_GET['go'])
{
case"Home": $stanjeLinka = $aktivan;break;
case"ONama": $stanjeLinka = $aktivan;break;
case"ProjektiUdruge": $stanjeLinka = $aktivan;break;
case"Clanovi": $stanjeLinka = $aktivan;break;
case"Galerija": $stanjeLinka = $aktivan;break;
case"Contact": $stanjeLinka = $aktivan;break;
case"Forum": $stanjeLinka = $aktivan;break;
default:$stanjeLinka = $neaktivan;
}
?>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/?go=Home">Home</a> </li>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/?go=ONama">O nama</a> </li>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/?go=ProjektiUdruge">Projekti Udruge</a> </li>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/?go=Clanovi">Clanovi</a> </li>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/galerija">Galerija</a> </li>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/?go=contact">Contact</a> </li>
<li class="<?=$stanjeLinka?>"><a href="
http://www.sportvirtual.hr/phpBB">Forum</a> </li>
</ul>
ovo je css:
a {
text-decoration: none;
color: #FFFF00;
font-size: 1.01em;
}
a:hover {
color: #FFFFFF;
}
li {
display: inline;
float: left;
}
.lista {
font-size: 1.01em;
margin-right: auto;
padding-top: -10px;
padding-bottom: 1px;
margin-top: 0px;
font-family: Tahoma, Verdana;
text-decoration: none;
color: #fff500;
text-decoration: none;
}
ul .lista .aktivanCSS a {
color: #fff500;
text-decoration: none;
}
ul .lista.aktivanCSS a:hover {
color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFF00;
border-bottom-color: #000000;
border-left-color: #FFFF00;
text-decoration: none;
}
ul .lista .aktivanCSS a:active {
color: #fff500;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFF00;
border-bottom-color: #000000;
border-left-color: #FFFF00;
text-decoration: none;
}
ul .lista .neaktivanCSS a {
text-decoration: none;
color: #FFFF00;
}
[Ovu poruku je menjao DavorPro dana 18.12.2007. u 12:15 GMT+1]
[Ovu poruku je menjao DavorPro dana 19.12.2007. u 22:18 GMT+1]