Pure CSS to display the active page in the navigation.
Code March 11, 2008
Often I see quite elaborate work to have the current page displayed in a different way in the navigation bar. From javascript to PHP, with the most common one being to give the current page link in the navigation bar the distinction of the class=”current” (or class=”active”).
For myself I find those approaches which use additional, non CSS code too complicated and adding the .current class to a different navigation link per page works only as long as you are not using a server-side include for the whole navigation bar.
So, what’s the solution?
A simple 3 step process:
-
Add an ID to the body tag of every page which will be linked to from the navigation bar. For example
<body id="home"> or <body id="gallery">. - Add an ID to each navigation link. (Remember: ID’s for single selectors, classes for multiple usages on a page). For example:
<div id="navigation"> <a href="index.html" id="nav-home">Home</a> <a href="products.html" id="nav-products">Products</a> <a href="gallery.html" id="nav-gallery">Gallery</a> <a href="about.html" id="nav-about">About</a> </div>
- Add CSS selector which will highlight the current page.
body#home a#nav-home,
body#products a#nav-products,
body#gallery a#nav-gallery,
body#about a#nav-about
{
color: red;
}
Now you can add the HTML part into a server-side include (i.e. you need only to write it all 1x instead for each page separately) and without further ado your current page will be highlighted in the navigation bar.
Of course there are other ways how you can address the navigation links (e.g. body#home#navigation#nav-home etc.). Also, you’ll probably give the color not a web color name but either a hex or rgb color value.
Good Evening
I wonder if you can help me
I am re-building my site using expression web 2 and a dwt. Unfortunately this means I can’t assign id’s to the “body” tag unless the whole of the body is editable, defeating the point of the dwt.
Kind regards
Hi Simon -
In this case I suggest to put a DIV tag right after the body tag which encompasses all of the edible area.
You COULD also assign a distinctive tag to the navigationbar itself (try a “double tag” like [div id="navigation index"] and [div id="navigation gallery"] and treat the second word as your body replacement tag).
If the above doesn’t work, wrap your navigationbar into a DIV and use that as the body/page name replacement tag.
Hope this makes sense!
Thanks, this is really helpful =]
Looks like an interesting technique.
Surprised I have not seen it elsewhere.
Look forward to trying it out.
Hi there,
I was wondering how I might do this when I’m using an Iframe.
I somehow need to get the body ID of the page currently in the iframe?
This will not be directly possible because the iFrame contains nothing more than the source link to the page that gets imported.
Now, with a bit of manual labor and a non-changing iFrame content you can assign an ID to the iFrame tag itself and have that act as the hook into the navigation.
This will only work if there is only 1 iFrame in question per page with no dynamic changing content within the page read into the iFrame, but if so, then it would work.
Hi Marlyse;
I am very new to Expression and i am having the same problem as Simon. I have the following div for my navigation bar. Could you please give some samples?
Help
Contact Us
Home
Hi Mahmut - try to understand the principle of the setup: a div with a specific name per page around the navigation, making each page have a unique ID for the navigation.
Usually, putting the page ID (e.g. “help” or “contactus”) into the BODY tag is just a simple way of doing it, it ID’s each page plus you know the tag will be encompassing the navigation.
If you are using some software and don’t have access to the BODY tag for whatever reason, you could create a DIV tag at the beginning of your content (and have the end tag of it be the last thing on the page) and put your PAGE ID into that tag.
After that it works the same, but instead of “body#home a#nav-home” it would be “div#home a#nav-home” and so on.
Good luck.