Comments on: CSS Current Page Indicator

By: Paul OB

Paul OB — Mon, 01 Mar 2010 21:07:40 +0000

Thanks for spotting the typo Jules.

By: Jules

Jules — Sun, 28 Feb 2010 20:27:44 +0000

thanks, I always wondered how this was done, I’ve used this in my site and bookmarked it

theres a typo in the css after li.one there should be a comma – had me stumped for a while

By: Jerry

Jerry — Mon, 02 Nov 2009 16:33:31 +0000

Great stuff Paul. I always love ‘pure’ CSS solutions, and this technique has lots of real world applications. Great mod to get the ‘current’ link disabled too!

By: Paul OB

Paul OB — Sat, 03 Oct 2009 16:27:45 +0000

Hi Davin,

Yes that’s fine (as long as javascript is turned on of course) or better still do it serverside with php

These are CSS articles so we stick to CSS techniques but of course it can be done serverside with something like php or clientside with js.

By: Davin

Davin — Fri, 02 Oct 2009 22:46:03 +0000

I think a slightly better option and one I have done on my site so that one does not have to remember what to put into the body tag is to on page load loop through the anchors in the nav and compare them to the current page. If one matches then put int a class that highlights that item and remove the anchor tag. I did this pretty easily with jQuery.

By: Celik Konstruksiyon

Celik Konstruksiyon — Wed, 12 Aug 2009 18:56:35 +0000

Thanks you for a lot dude!

By: Jen

Jen — Wed, 29 Jul 2009 19:56:29 +0000

Thanks for this tutorial. I was looking for a good CSS solution and this works great.

By: graphicsguy

graphicsguy — Wed, 17 Jun 2009 16:51:17 +0000

More great advice, thank you. I’m anxious to try this as soon as I get home. I’ll leave feedback if I’m able to make it work for me.

By: Matthew

Matthew — Mon, 15 Jun 2009 14:04:09 +0000

Thanks so much for this tip. I’m a CSS noob and I was able to get this working on my new site.

By: bayanlar

bayanlar — Fri, 12 Dec 2008 22:47:09 +0000

There are working fine now! Thanks.

By: dıs cephe

dıs cephe — Fri, 11 Jul 2008 17:32:08 +0000

thanks paul..

By: fibercement

fibercement — Tue, 08 Jul 2008 10:15:13 +0000

I don’t think putting classes in the body element is, by any means, a drawback, it just makes sense.

By: Navigate-This

Navigate-This — Wed, 19 Dec 2007 14:32:10 +0000

[...] ID. This will allow for the menu to be used as an include and is the same technique used in the “current page indicator” [...]

By: Paul OB

Paul OB — Wed, 05 Dec 2007 11:19:22 +0000

In answer to Dr Johns query in post 10 I went one better than Stu’s method and created a current link that could not be clicked

http://www.pmob.co.uk/temp2/page1.htm

By: Paul OB

Paul OB — Wed, 05 Dec 2007 11:17:54 +0000

Hi graphicsguy,

Assuming you have set the id in the body correctly and you have added classes to each of the menu items then you would do something like this:

#masthead ul li:hover,
#page1 #masthead ul li.page1 {
background: url(../images/tab_right_hover.gif) no-repeat top right;
}
#masthead ul li a:hover,
#page1 #masthead ul li.page1 a {
color: #00f;
background: url(../images/tab_left_hover.gif) no-repeat top left;
}

Hope that was what you meant.