How to give the active item in the navigation bar an other color

[Andreas De Rudder]

Hello,

 

I would like to give the active item in the navigation bar an other color. Someone told me that I have to do it with JavaScript. Could someone give me an exemple of how I have to do it? I know nothing about JavaScript, so maybe you can give a clear exemple?

 

This is the css:

 

#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111;
}

#menu li {
float: left;
}

#menu li a {
display: block;
color: white;
text-align: center;
padding: 7px 7px;
text-decoration: none;
font-size: 90%;
}

#menu a:hover {
background-color: #808080;
}

 

And this is the menu list:

 

<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="santonino.html">Santo Niño</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="program.html">Program</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="adresses.html">Adresses and Accessibility</a></li>
<li><a href="announcements.html">Announcements</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

</div>

 

Thank you for helping me!

[dsonesuk]

How is this menu added? Manually or dynamically using server side code such as php.

[Andreas De Rudder]

I don't understand exactly what you mean, my knowledge of webdesign is still a bit basic... But I don't have used php, it is an html document. The css is in the head of the page and the menu in the body.

The website is www.msngent.be

[dsonesuk]

So you basically manually create, then copy and paste the same menu in each html page.

In that case all you have to do after copy paste in each page, add a active class to menu link that matches current url, then style it as required for that active class.

[Chikwado]

Even css can give better result try

a:visited { background-color:red;

[dsonesuk]

That is as it suggests for a visited link, and not for current ACTIVE link styling.