Indicate the Current Page in a Navigation Bar
How to show the current page in a navigation bar
In the above navigation bar, the link to This Page is always yellow on a blue background. The other links follow the conventional colours for links: blue=unvisited, purple=visited, etc.
This is achieved by giving each link a class or id (this example uses classes), and using an embedded style sheet to assign page specific CSS rules to the link.
The HTML for the above link bar is:
<table id="table1">
<tr>
<td><a href="#" class="home">Home</a></td>
<td><a href="#" class="page1">Page 1</a></td>
<td><a href="#" class="thispage">This Page</a></td>
<td><a href="#" class="page3">Page 3</a></td>
</tr>
</table>
The CSS used for the link bar (which would normally be in an external style sheet) is:
<style type="text/css">
#table1 {margin: 0 auto 10px auto; border: 2px solid maroon;
border-collapse: collapse; width:50%;}
#table1 td {padding: 0; text-align: center; border: 1px solid maroon;}
#table1 a {padding: 3px; text-decoration: none; display: block;}
#table1 a:hover {color: green;}
</style>
This defines the size of the table and styles the table cells and links.
The page specific CSS is:
<style type="text/css">
#table1 .thispage {color: yellow !important; background: blue;}
</style>
This sets the specific appearance for the link to This Page. The !important attribute forces the different colours to take effect, overriding the colours defined in the general styles.
A form of this method is used throughout this website, see the left menu on this page for an example.