How do I make a navigation bar highlight active pages?

Question

I want to make it so that whenever I click on a tab/item in the navigation bar, it is highlighted so you know which page you are on. Here is my CSS:

ul#navlist
{
margin-left: 0;
padding-left: 0;
padding-bottom:0;
margin-bottom:0px;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;

}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: yellow;
background-color: none;
text-decoration: none;

}

#navlist a:hover
{
color: #white;
background-color: blue;
text-decoration: none;
}



.offscreen {
position: absolute;
top: -30em;
left: -300em;
}

div#vmenu {
margin-top: 16px;
padding-left:12px;
border: solid 1px #30c9e0;
background: #FDD017;
width: 165px;


}

div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
}

div#vmenu ul a:link {
margin-top: 10px;
padding-top:10px;
padding-bottom:10px;
text-decoration: none;
font-weight: bold;
font-size: medium;
color: #000;
display: block;
}

div#vmenu ul a:active {
margin-top:10px;
padding-top:10px;
padding-bottom:10px;
text-decoration: none;
font-weight: bold;
font-size: medium;
background: #4d8cba;
color: #ffffff;
display: block;
}

div#vmenu ul a:visited {
margin-top:10px;
padding-top:10px;
padding-bottom:10px;
text-decoration: none;
font-weight: bold;
font-size: medium;
background: #4d8cba;
color: #000;
display: block;
}

div#vmenu ul li a:hover {
margin-top: 10px;
padding-top:10px;
padding-bottom:10px;
text-decoration: none;
font-weight: bold;
font-size: medium;
color: #ffffff;
display: block;
background-color:#1589FF;
}

Answer 1

The easiest way to do this is to make a separate id for the active menu-item. Then you van just put that in the css in the style you want.



I think in your code something like this:



#navlist #activeitem{

color: #white;

background-color: blue;

text-decoration: none;

}



hope this does the trick

Answer 2

of direction the glaring textual content will load swifter as no processing is needed. energetic navigation calls for a minimum of a few processing - even if on the server section or on the shopper section so it is going to take in time besides as resources....

Answer 3

Give each of you navigation elements an ID such as #homelink, then give the body tag on each page an individual ID such as #home.

Then create a rule thus...



#home #homelink,

#about #aboutLink,

#contact #contactLink{

//Your rules...

}