css en a:active behouden na click

[Verwijderd]

Ik heb een pagina met wat links en deze links worden met css omgebouwd tot een menu met submenu's.

De css code is als volgt:

code:

#menu {
   width: 147px;
   font-family: verdana, arial, sanf-serif;
   font-size: 12px;
}
#menu a {
   display: block;
   width:136px;
   padding: 5px 5px 5px 5px;
   background: #6797D0;
   text-decoration: none; /*lets remove the link underlines*/
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bolder;
   color: #ffffff;
   border-width: 0px 0px 1px 0px;
   border-style: solid;
   border-color: #FFFFFF;   
}
#menu a:link, #menu a:active, #menu a:visited {
   color: #ffffff;
}
#menu a:active {
   background: #e60000;
   color: #ffffff; 
}
#menu a:hover {
   background: #e60000;
   color: #ffffff;
}
#submenu a {
   display: block;
   width:136px;
   padding: 5px 5px 5px 5px;
   border: 0px none;
   background: #93B6DF;
   text-decoration: none; /*lets remove the link underlines*/
   text-align: right;
   border-width: 0px 0px 1px 0px;
   border-style: solid;
   border-color: #FFFFFF;      
}

En het menu ziet er als volgt uit:

code:

<div id="menu">
  <div><a href="javascript:void(0);">item 1</a></div>
  <div><a href="javascript:void(0);">item 2</a></div>
  <div><a href="javascript:void(0);">item 3</a></div>
</div>

Dit zorgt ervoor dat het menu blauw is met rode mouseovers.
Als je nu op een link klikt wordt dus a:active gebruikt en wordt de achtergrond van het menu-item rood gemaakt. Bij mouse-over wordt dat dus blauw.

Allemaal leuk en aardig natuurlijk. Maar ...
Als je een item selecteerd wordt er een pagina in een andere frame geopend.
nu wil dus het feit dat wanneer je ergens anders met de muis klikt of in het andere frame scrollt de focus van de a:active afgaat en het menu-item weer blauw wordt en je dus eigenlijk geen idee meer hebt welk menu-item je had geselecteerd.

Hebben jullie enig idee hoe ik dit met CSS kan oplossen, zodat het geselecteerde item rood blijft, totdat je weer een ander item selecteert.

[KnoppenSpook]

Dat lukt je niet met alleen CSS, zal toch iets met scripting moeten gebeuren

[X-Lars]

idd, en combineer dat eventueel met Uberlink List Menu

[Verwijderd]

ten eerste: gooi dat menu alsjeblieft in een lijst
ten tweede er bestaat ook a:visited, bedoel je dat? denk het niet gezien je laatste opmerking en je CSS (waaruit blijkt dat je :visited al kent )

[Verwijderd]

in je #menu bedoel je natuurlijk sans ipv sanf he?

[Verwijderd]

Lekker boeiend, was inderdaad een tik-foutje ...
Als ik visited zou aanpassen, dan krijg ik na verloop van tijd een geweldig mooi rood-menu, wat natuurlijk niet de bedoeling is.

[Verwijderd]

Ik ken het probleem. Ik had het toendertijd met javascript opgelost:

code:

var xl=document.links;
function verander(e){
if (!document.all)event=e;
if ((event.type!='mouseup')&&(event.keyCode!=13))return;
if (event.button==2)return;
for (i=0;i<xl.length;i++)
{
xl[i].className='';
}
this.className='geklikt';
}
for (i=0;i<xl.length;i++)
{
xl[i].onmouseup=verander;
xl[i].onkeyup=verander;
}

Deze code verandert de className van links op het moment van klikken. De classname kun je vervolgens stylen.

Het is trouwens eigenlijk a:focus, dit doet ie eigenlijk fout. a:active werkt dus anders in andere browsers.

Ik heb het liefst ook een soort css-oplossing waarin de links werken als een soort radio buttons, maar volgens mij kan het niet (iig niet zonder daadwerkelijk radio-buttons te gebruiken, en dan nog werkt waarschijnlijk alleen in de nieuwste versies van Mozilla)

[X-Lars]

in vervolg op mijn reactie:

PHP:

<div id="navigation"> 
    <ul> 
        <li<? if($_SERVER['PHP_SELF'] == "/pagina1.php") echo " id=\"uberlink\""; ?>><a href="pagina1.php">Pagina 1</a></li> 
        <li<? if($_SERVER['PHP_SELF'] == "/pagina2.php") echo " id=\"uberlink\""; ?>><a href="pagina2.php">Pagina 2</a></li> 
        <li<? if($_SERVER['PHP_SELF'] == "/pagina3.php") echo " id=\"uberlink\""; ?>><a href="pagina3.php">Pagina 3</a></li>  
    </ul> 
</div>

als je op een van de pagina's bent geef je die dus de id "uberlink" mee zie verder de betreffende site

[Nemrah]

Euhm, nog niet eerder gezien, maar uit het losse handje:
Javascript en twee profieltjes: "vrij" en "geselecteerd"
OnClick de style van het menuitem veranderen van "vrij" naar "gelecteerd" en de link uit voeren.
Kan zoiets?
* mosterd na de maaltijd

[ Voor 16% gewijzigd door Nemrah op 17-02-2004 11:49 ]

[Verwijderd]

Nou bedankt voor de snelle reacties, eens kijken of ik hier wat mee kan!
X-lars: dat gaat niet werken aangezien de menu-pagina niet opnieuw geladen wordt. Dat zou er eventueel nog ingebouwd kunnen worden, maar das niet de bedoeling

[X-Lars]

bah, frames
maar dan wordt het toch javascript ja

[Verwijderd]

Tsja, dat was een voorwaarde van de klant en mijn baas weigert daarvan af te stappen helaas. Het is niet anders, anders had ik het wel helemaal in PHP opgelost