Geselecteerd menu andere kleur

Status
Niet open voor verdere reacties.

Syphera

Gebruiker
Lid geworden
19 jan 2004
Berichten
189
Ik wil graag het geselecteerde menu een andere kleur geven en het wil me maar niet lukken.
Deze code heb ik tot dus ver:


/* Menu */

#menu-wrapper {
overflow: hidden;
height: 56px;
background: #045FB4;
border-top: 1px solid #3D2729;
}

#menu {
width: 1000px;
height: 55px;
margin: 0px auto;
padding: 0px;
}

#menu ul {
margin: 0;
padding: 10px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
border-right: 1px solid #000000;
}

#menu a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
padding: 10px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Verdana', serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
}

#menu a:hover {
background: #40FF00;
border-radius: 8px;
text-decoration: none;
color: #3D2729;

het hoveren gaat goed,want dan zie ik een andere kleur, maar als ik dan op het menu item klik dan verdwijnt de kleur weer.
Wat doe ik fout?

Groet,
Michel
 
Om de kleur te behouden kun je 'active' gebruiken.

Code:
#menu a:hover, a:active {	
background: #40FF00;	
border-radius: 8px;	
text-decoration: none;	
color: #3D2729;	}
 
Sorry, het is een foutje van mij.
Code:
#menu
moest achter
Code:
:active
.
Dan wordt het dus:

Code:
a:active#menu, a:hover#menu {	
background: #40FF00;	
border-radius: 8px;	
text-decoration: none;	
color: #3D2729;

Hopelijk doet hij het nu wel.
 
Wat is de code in het html/php bestand?
Misschien zit daar iets.
 
<div id="menu">
<ul>
<li><a href="index.html">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
<li><a href="#">Home 6</a></li>
</ul>
</div>
 
<div id="menu">
<ul>
<li><a href="index.html">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<li><a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
<li><a href="#">Home 5</a></li>
<li><a href="#">Home 6</a></li>
</ul>
</div>
 
Het zal niet lukken met :active. Zodra je op het linkje klikt kom je op de betreffende pagina en dan is "a:active" weg.
Je kunt het oplossen met een class op de actieve pagina.
Code:
<ul>
<li><a href="index.html">Home 1</a></li>
<li><a href="#">Home 2</a></li>
<[COLOR="#000080"]li class="current">[/COLOR]<a href="#">Home 3</a></li>
<li><a href="#">Home 4</a></li>
</ul>
In je css kun je dan zetten:
#menu .current { background: #....; }
 
Bedankt, want dit is de oplossing waar ik naar op zoek was.
De rest ook erg bedankt voor het meedenken!

gr,Michel
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan