Help with CSS Menu States

[tannercampbell]

Hey all,

I recently took on a client for a code touch-up gig. Their site was all sloppy javascript, inline css, and tables – yes, tables!

Anyway, I’ve gotten it pretty nicely cleaned up but I have one thing left to do that I’m not sure HOW to do.

The menu is a simple horizontal list with styling … the client is requesting that the menu have page-specific states. Meaning if I’m on page whatever.php then the menu buttons “whatever” should be a different color than the rest of the menu buttons, signifying my location.

http://vapedgoodz.com

I don’t know how to pull that off, could someone give me a hand or point me in the right direction?

Very Best,
Tanner Campbell

[Paulie_D]

There are a couple of ways to do it.

The easiest way is to give each page an ID (or class)

Thus, if you have a menu with 3 items you give each of those list items a class of its own.

So you could have a `.home`, `.contact`, `.clients` etc on your list items.

The you can target the page and list items with

#page-1 .home {
background:xxxxxx;
}

#page-2 .home {
background:xxxxxx;
}

etc…. if you see what I mean.

[Paulie_D]

I don’t see why…for the menu all you are doing is adding classes not moving things around.

Ditto for the page ids.

Everything else is in your CSS sheet

[wolfcry911]

As Paulie mentioned, there are a few ways to do this. You’re using a server side scripting language (PHP) so that’s one way – you could use PHP to add a class to the menu item based on url.

Paulie’s method works well too, so I’ll try to explain it better.

put a class on each of your menu items (like .home, .contact, .about). Then for each page (or section) of the site put a similar id or class on the body – so the home page would have an id of home on the body element and the contact page would have an id of contact on the body, and let’s say there’s an about page and a sub about page, each would have an id of about on the body. Then, set your css up like this:

#home .home,
#contact .contact,
#about .about {
styling for active menu item }

so that when the .home classed menu item is a child of the #home id (which only occurs on the homepage) it gets the active menu item styling; or when the .about classed menu item is a child of the #about id (on either of the two about pages) then it gets the active menu styling…

[wolfcry911]

@cwork, you’re quite right – I missed that.

Here’s an article on different ways to accomplish [dynamic ids with php](http://perishablepress.com/dynamic-body-class-id-php-wordpress/ “”).

[wolfcry911]

your html is malformed – the doctype is inside the body

[wolfcry911]

I appreciate the offer, but it’s truly not necessary. Let’s just make it a virtual beer ;)

I’ll take a look at the menu buttons in IE…

[wolfcry911]

It’s not the doctype – no new elements are used. It’s the filter properties. The problem is that it appears the filter on .button can’t be overruled later with another filter (someone please correct me if I’m wrong).

[wolfcry911]

It’s as I stated, once a filter is used, it can’t be overwritten. So with the standard button styling coming first, the id class descendant selector couldn’t overrule the standard button background.

With the descendant selector first that background filter is applied before the standard button filter and works!

If it were me, I’d do away with the filters altogether and let (older) IE users suffer – that or use a simple background sprite for everything.

[Eric]

Here are three simple ways to do it. They all work in IE.http://www.websitecodetutorials.com/code/css/highlight-current-page.php

[Author]

Posts