Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue



2007120106 Email to Ronx

Indicate the Current Page in a Navigation Bar

How to show the current page in a navigation bar

Home Page 1 This Page Page 3

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">
<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>

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;}

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;}

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.