Highlight the navigation menu for the current page?

You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically.

You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically... That probably didn't make much sense, so here's an example: Index page Page 1 In the page1.

Html, you would set the id of the body to: id="page1". Finally in your CSS you have something like the following: #index #menu . Index, #page1 #menu .

Page1 { font-weight: bold; } You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update. It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.

Sounds like a good idea,simple. But how to alert the id each page? In the server side?

– hguser Jan 7 at 15:06 For one of my own sites the pages were static html - this method just made updates simpler (as the menu was in an included file I only needed to alter it once if I added a new page). However, yes you would need some way to set the body id on the server-side. How you do this depends greatly on how you run your site.My Wordpress blog, for example, uses a theme that sets a class in the body tag according to what page is being viewed.

– icabod Jan 7 at 15:18.

I would normally handle this on the server-side of things (meaning PHP, ASP. NET, etc). The idea is that when the page is loaded, the server-side controls the mechanism (perhaps by setting a CSS value) that is reflected in the resulting HTML the client sees.

Try use a:active{ font-weight: bold; } in your css file.

A:active selects a link that is currently being clicked-on (or selected), so I don't think it's what the original poster is after. – icabod Jan 7 at 14:40 Actually icabod is right. It does not work or not what I wanted.

When I click the link,a new page will be rendered,all styles come to default. – hguser Jan 7 at 14:41.

You can use Javascript to parse your DOM, and highlight the link with the same label than the first h1 tags. But I think it is overkill =) It would be better to set a var wich contain the title of your page, and use it to add a class at the corresponding link.

Sorry in advance. My rep is not high enough to comment on other answers or the question. I tried using the a:active pseudoclass myself and it did not seem to work.

I was however using it in an ASP. Net application in the master page style. Maybe it works better in static HTML docs?

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.