How to make a button and or tab in a Nav bar remain down when clicked.

[Iconic_creator]

I recently created a practice web page with only the first link working, meaning only the first button links to another page, it a work in progress.

What I'm trying to do is make the button stay down when it is clicked, this will indicate what page the visitor is on.

So lets say you click on the second button or tab,I need that tab to remain down or as it appears in the rollover state. I mean the page can function without this but I would still like to know for other future developments and my knowledge. How do I get each of the buttons to remain in the hover or down state? There are only two states.

I would greatly appreciate any suggestion and or comments.

Thanks everyone.

Patrick - Minnesota

[AutisticCuckoo]

There are at least two ways.

If you have static pages with the nav bar hard-coded on each page, or a dynamically generated page, you can simply assign a class or an ID to the button that should be highlighted. Then set CSS rules in your style sheet for that class or ID.

#nav li {...default button style...}
#nav li.current {...active button style...}

If you're using server-side includes you can assign an ID to each button in the nav bar and then set a class on the body element for each page. Then set CSS rules for the combinations, like so:

#nav li {...default button style...}
body.start #start, body.news #news, ... {...active button style...}