CSS identifies the implementation principle of the current Location page effect

Css

Current page--for example, now the page is the homepage, then the first page of the navigation bar color and other columns are different, to give visitors a clear indication.

Below the specific approach, the basic menu implementation and the general CSS menu is not much different, focusing on how to implement the current page.

Set up a menu of 5 columns: Home, about, products, services, contacts, respectively, to each column a id,m1-m5,css can be written as follows:

XHTML CODE:

<ul id= "NAV" >
<li id= "M1" ><a href= "index.html" >Home</a></li>
<li id= "m2" ><a href= "about.html" >About</a></li>
<li id= "M3" ><a href= "products.html" >Products</a></li>
<li id= "M4" ><a href= "services.html" >Services</a></li>
<li id= "M5" ><a href= "contact.html" >Contact</a></li>
</ul>

CSS CODE:

#home
#nav Li#m1 A,
#about #nav li#m2 A,
#products #nav li#m3 A,
#services #nav Li#m4 A,
#contact #nav LI#M5 a{
Color: #FFF;
Background: #DC4E1B URL (navbg.gif) no-repeat;
}

Then give each page the Bady label a separate ID, for example, to the first page ID is home, the rest of the analogy.

The advantage of this approach is that each page menu is the same, easy to modify, dynamic page contains also easy.