Showing current page in CSS/HTML only

Personally, I think it's better to do this with PHP, but you can do it without using PHP.

It's all about the cascade. Say your menu looks like this...

HTML
<ul>
<li><a href="one.htm">first page</a></li>
<li><a href="two.htm">number two</a></li>
<li><a href="three.htm">third</a></li>
<li><a href="four.htm">page four</a></li>
<li><a href="five.htm">five</a></li>
<li><a href="six.htm">sixsixsix</a></li>
<li><a href="seven.htm">SEVEN</a></li>
<li><a href="eight.htm">eighth page</a></li>
<li><a href="nine.htm">NiNe</a></li>
<li><a href="ten.htm">TEN!</a></li>
</ul>

First, add an id to each list item. Something like this...

HTML
<ul>
<li id="i1"><a href="one.htm">first page</a></li>
<li id="i2"><a href="two.htm">number two</a></li>
<li id="i3"><a href="three.htm">third</a></li>
<li id="i4"><a href="four.htm">page four</a></li>
<li id="i5"><a href="five.htm">five</a></li>
<li id="i6"><a href="six.htm">sixsixsix</a></li>
<li id="i7"><a href="seven.htm">SEVEN</a></li>
<li id="i8"><a href="eight.htm">eighth page</a></li>
<li id="i9"><a href="nine.htm">NiNe</a></li>
<li id="i10"><a href="ten.htm">TEN!</a></li>
</ul>

After that, you give each body tag an id too, so on page one, you can have something like this...

HTML
<body id="p1">
<ul>
<li id="i1"><a href="one.htm">first page</a></li>
<li id="i2"><a href="two.htm">number two</a></li>
<li id="i3"><a href="three.htm">third</a></li>
<li id="i4"><a href="four.htm">page four</a></li>
<li id="i5"><a href="five.htm">five</a></li>
<li id="i6"><a href="six.htm">sixsixsix</a></li>
<li id="i7"><a href="seven.htm">SEVEN</a></li>
<li id="i8"><a href="eight.htm">eighth page</a></li>
<li id="i9"><a href="nine.htm">NiNe</a></li>
<li id="i10"><a href="ten.htm">TEN!</a></li>
</ul>
<p>one</p>
</body>

Of course, page two would be p2, page three - p3, etc.

By using the cascade, you can set a style for list item 1 on page 1, list item 2 on page 2, etc. The CSS would look something like this:

CSS
#p1 #i1 a,
#p2 #i2 a,
#p3 #i3 a,
#p4 #i4 a,
#p5 #i5 a,
#p6 #i6 a,
#p7 #i7 a,
#p8 #i8 a,
#p9 #i9 a,
#p10 #i10 a {
color:red;
}

Here's the example.

Comments

#1
2008-09-26 Ant P. says :

Wow, that's a great idea. I ended up writing an ugly if/else mess for mine when I could've just used this frown

#2
2009-07-25 mark young says :

Thanks Bon Rouge! Took me an hour to find your advice, but it fills the huge gap that everyone fails to explain when trying to make a universal menu that is easily programmable for specific pages. My challenge was to hilite a specific menu item ( eg. list item ) using identical menu code throughout the many pages in my web-site!

Thanks. Merci. Gracias.

#3
2010-01-20 vishal says :

HI Bon Rouge!

Can you provide me the php code of this kind as i have .php pages.

As my menu item contains the images and i want to have a hover effect on particular menu.

Eg.: i have 5 menu items when user click one of them it should get selected with the hover effect.

I hope so you got my point.

A help would be greatly appriciated.

Thanks in advance

Here is my personal Email-id : vishal3184@gmail.com

#4
2011-09-22 jir says :

#5
2011-10-08 JR says :

This works with full pages - does anyone have a solution for dynamic pages where the internal of the pages changes but uses the same <body id> element? I've tried to do this below the body element and have not found a solution yet.

#6
2011-10-08 Santosh says :

It is very good.... thanks

#7
2011-11-09 lG_BR says :

thanks man, thats awesome!!!!

#8
2011-12-30 NG says :

how to do it without using <li> tag

#9
2011-12-30 BonRouge says :

NG,
You would put the ids into whatever tags you're using.

#10
2015-05-13 Kakaire Charles says :

This is quite wonderfuuuuuuul! I had suffered for long.

Comment form

Please type the word 'wolf' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url