Ik probeer met CSS een menu te maken waarbij de actieve link/pagina een andere kleur krijgt. Dit lijkt niet zo moeilijk en het werkt voor het grootste gedeelte wel. Alleen dus net het active deel niet. Ik heb al gekeken waar het aan kan liggen. Ik kan wel home active maken. Alleen als ik naar een ander menu item ga dan blijft home active.
CSS code:
.menu2{margin:207px 0 0 0px; padding:0; height:30px; width:900px; display:block; background:url("../images/topMenuImages.png") repeat-x;}
.menu2 li{padding:0; margin:0; list-style:none; display:inline;}
.menu2 li a{float:left; padding-left:15px; display:block; color:rgb(0,0,0); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("../images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu2 li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
.menu2 li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu2 li a:hover span{background-position:100% -60px;}
.menu2 li a.active, .menu2 li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/topMenuImages.png") 0px -90px no-repeat; color:rgb(0,0,0);}
.menu2 li a.active span, .menu2 li a.active:hover span{background:url("../images/topMenuImages.png") 100% -90px no-repeat;}
HTML code:
<ul class="menu2">
<li><a href="http://www.x.nl/?page=home"; class="active"><span>HOME</span></a></li>
<li><a href="http://www.x.nl/?page=menuitem1"><span>menuitem1</span></a></li>;
<li><a href="http://www.xs.nl/?page=menuitem2"><span>menuitem2</span></a></li>;
<li><a href="http://www.x.nl/?page=menuitem3"><span>menuitem3</span></a></li>;
<li><a href="http://www.x.nl/?page=menuitem4"><span>menuitem4</span></a></li>;
<li><a href="http://www.x.nl/?page=menuitem5"><span>menuitem5</span></a></li>;
</ul>
Zo op het eerste gezicht klopt het wel allemaal. Maar zoals gezegd. De home blijft active ook als ik op de andere linkjes klik. Hover en dergelijke doen het wel. Wie heeft het antwoord?
4.624 views