Changing navigation on a multipage website

[def6054]

What is the quick and easy way to update a navigation bar on a multipage website. I want the page to show where you are as well, currenly I am using a css id to keep track of what page you are on.

<div class="nav">
        <ul>
            <li id="current"><a href="some_url/">Home</a></li> <!-- CSS will display this link differently-->
            <li><a href="some_url">Somewhere else</a></li>
            <li><a href="some_url">Somewhere else2</a></li>
            <li><a href="some_url"">Somewhere else3</a></li>
        </ul>
</div>

That is the example I would use to show the current page with a css selector. I am familiar with SSI, but how can you maintain a different style for the link that you are on? Is there a way to script it, a different language to alleviate this issue or am I missing something simple?

[soapyillusion]

The easiest way is to use a style sheet in css and link to each page like so:

 <link rel='stylesheet' type='text/css' href='stylesheet1.css'> 

Copy and paste that navbar. Just make sure you use the same id's on each page

Or you could go a little more advance and create a template. Which im not so familar with. (more work then i'd like)

[def6054]

well thats kind of the issue in another way. then you would have multiple css sheets to maintain.

[JorgeM]

You can have one style sheet, then if you want to apply a different style to a link in the navigation to show the user the page they are on, on each page, apply a different ID.

For example, on page 1,

<div class="nav">
        <ul>
            <li id="current"><a href="some_url/">Home</a></li>
            <li><a class="currentPage" href="some_url">Somewhere else</a></li>
            <li><a href="some_url">Somewhere else2</a></li>
            <li><a href="some_url"">Somewhere else3</a></li>
        </ul>
</div>

Then page 2

<div class="nav">
        <ul>
            <li id="current"><a href="some_url/">Home</a></li>
            <li><a href="some_url">Somewhere else</a></li>
            <li><a class="currentPage" href="some_url">Somewhere else2</a></li>
            <li><a href="some_url"">Somewhere else3</a></li>
        </ul>
</div>

In your CSS,

.currentPage {color:red;}