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.
I finally decided to assign the body id using java.
In an editable part of the head I put
var Dave=”id1″
Immediately after the tag I put
document.getElementsByTagName(‘body’)[0].setAttribute(‘id’,Dave);
there was an error in my last posting.
line should read
“Immediately after the tag I put”
there seems to be a problem uploading messages containg words in tag brackets
the body tag is missing in my last two postings
please forgive incorrect punctuation and change quotes for tag brackets
line should read
Immediately after the “body” tag I put
Hi Marlyse;
I need to create a navigation within a page with nav. showing which part of the page is currently selected. Is it possible to use your technique in this case?
I would very much appreciate your help. Thanks!
… I should have said that my menu (nav) is fixed on the page. Adding IDs to each navigation link and to destination anchors (h1, for instance) within a page doesn’t seem to work – there is no indication which section is current.
I am too new to css to figure out what’s wrong. Could you help me, please?
Irina, I am so sorry to answer only now, for some reason I was never notified of your comments. Were you able to sort things out?
Simon, I am really sorry that I did not answer your comments, for some reason I was not notified of them! Were you able to sort things out?
Hello, thank you for this, was using a dreamweaver template and was unable to work out how to assign the “active” page in my nav, your little trick works a treat. Thanks
Got a question how can I go about doing this if I have separate header and body file?
How can I apply this tag if my body tag has already started in header file? and since its same header in all my pages is there a way around this tagging the pages?
Thanks.
Just a update. I figured it out, I went ahead and used php and the css idea to get id for my body tags.. :) This works for me since I have a relatively small site of 6-7 pages.. anyways below is what I did hoping it will help someone out.
include this script or just create a php page and then include it in all your pages at the very beginning.
you can use else if to add more pages
Update I ended up getting around with using php. I am posting the code I used below hoping it might help someone who is in same dilemma as me.
Add the code below to the very top of your header or create a new file and place it in there and then just include the file in your header.
pagelink is the link that PHP_SELF pulls, just the name of the file like index.php, this is very basic and there are ways you can get full URL as well which you can use if you have a huge site but wont find this efficienct anyways.
pagename is the id of your body tag that you want to assign. you can use “else if” to get more pages.
Inside the body tag insert so your body tag in header will look like
<body id="”>
and thats it.. now just take care of the CSS file as show in tutorial. :D
ughh sorry I cant attach the code here.. :|
but basics are just get the url using php_self or request_uri and then write a if else statement to match it with the url. if a match id is chosen and that id is assigned in the body tag. :D
@Mandeep – good you figured that out for yourself! Yes, either use some PHP to dynamically add the body ID (that is what e.g. WordPress does) or if you do not know how to do that you can create a wrapper div which starts not within the header and assign each of those the “page” ID. Using PHP to update the body tag is of course less hassle and the more elegant way of doing it.
So many complicated workarounds to this problem… I’m very glad I found this! Works like a charm.
I am using Dreamweaver CS5 and needed to make the navigation bar show the active page. The code you provided works well with Firefox but does not seem to work in IE8. Do you know the code that needs to be added to the style sheet to get IE8 to work as well?
Just a note I am new to developing web pages so I hope you can keep the answer as simple as your previous code.
Thank you for your help.
Jacqui – not sure what the problem is. Can you give me an URL to the site you are trying to get it to work? I noticed that the website you’ve noted here uses “wrapper” as a tag and also as an ID – did you do this site? WRAPPER is not an HTML tag. If this is the site you are trying to make work, right here, this could be causing problems for IE8 (and other browsers just handle it more elegantly).
Some of them counld not understand
http://www.webmasterworld.com/forum83/7142.htm
This link gives u a better picture
Very simple and very well explained, saved me a bit of time and that is always nice.
Thanks
@mohamed – That post you are referring to is an older post from 2005 and states that it can not be don with CSS only. Me, on the other hand, show you how it CAN be done with CSS only.
Brilliant.
Simple, clean, and light-weight. Thank you for sharing.
I have a question about this tutorial:
and sorry I am a bit new to CSS but when I used this for my website, the only page that stays “red” (or the color that is suppose to change into to indicate the page is active) is the homepage. no matter what page i am on. did i do something wrong?
@Elaine – Yes, obviously somewhere along the line you must have missed something. Unfortunately I can not help you if You do not give an URL to that website.
You might want to sketch out the steps listed above to ensure you understand the principle and then double-check what you have done against it.
Thanks!! So obvious. Totally overlooked it.
This doesn’t seem like it would work on ruby on rails unless you did a work around to change the body id for each different page yield.
Anybody now how to do this in ROR?
You are a genius! Brilliant solution!
Thank you so much! What a simple, elegant solution!
thank you very much! you’re an angel!:)
Thanks for this info, you saved with after 2 days of searching for solution to a JS menu I am working on.
Thanks a lot
I’m wondering if I can make this work with my current set up. I’m using css, a php include, and a little javascript for a mouseover image swap. I want the current page to stay in the mouseover state? Any ideas and suggestions on how to accomplish this?
Thanks!
I do not understand why you think that a mouseover of an image swap would change the id of the page which underlies the css styling?
Hi
I found your solution and was hoping ot would work with my site, but am not really sure it will.
I am building a new website that is not made up of separate html pages, the header and footer are static and used on every page. I wish to show that when a user clicks on the about us page the navigation shows they are on that page.
but trying your solution the link stays red all the time when you are on the index page or the about us page.
any suggestions?
Somewhere along the way you are missing something. Make sure you are putting a different class name into each body tag and each navigation link and that you are referencing it correctly in your css and it will work.
It’s worked.Thank u.
Awesome, I’ve been looking around for a solution for this for weeks. They all were SO complicated, but yours is easy and quick, Thank you for posting this tutorial!
Hi,
Delightful! The only bit I don’t understand is the line of code which goes into the stylesheet in step 3. What does the “A” do. Bear with me, I just don’t like mindlessly copying code. Thanks again,
David, step 3 deals with the styling. “a” is the css selector for links. “body#gallery” will equal to TRUE if the body tag has the ID of “gallery” and “a#nav-gallery” will color that specific link with the ID of “nav-gallery” only.
Make sense?
Makes perfect sense to me. I’m rapidly building includes now to insert into the various web pages I manage. Many thanks for such a helpful resource.
This is a great tutorial–it was easy to understand and did exactly what I wanted. Thank you!