I planned to post a lot more here when I signed up but there's just no time for it all. Work gets the best of me, I'm afraid. Anyway, I just popped in to check whether any of you have any good ideas on how to achieve the following: keep items selected when you move down in a menu hierarchy so that one can follow a path, from a top level to sub levels.

Here's a pic that I hope illustrate the idea:



When moving down in the menu, the corresponding levels further up in the hierarchy remain selected so that the person navigating will remember the path, or know where in the system he is. It may seem a bit awkward to do it this way, but that's how the client wants it. No drop-downs or fly-outs.

I have tried with "current" and "a:focus" but it doesn't really work out; the items do not remain selected.

Not sure if I have explained this adequately, but if someone did get it, I'd appreciate a few notes.

I personally don't know how to do it, but this menu http://www.cssplay.co.uk/menus/pro_droptab.html#nogo
might be helpful. It appears to be similar in it's action as what you are hoping to do. See if this sheds any light on the the problem.

No, not quite, but thanks anyway.

Multi-level navbars. Yuck. Well, at least it's not a drop-down.

Anyway, I think CSS is probably not strong enough to do this on its own. With some PHP, however, it should be straightforward.

The idea would be to use PHP to test each link, and see whether it matched the corresponding part of your URL path. If they match, you use PHP to apply a class to the link, which CSS then styles.

If you keep your site structure (naming of URLs) absolutely consistent, then the script should be able to do this automatically. Otherwise, you'll have to test on a case-by-case basis, which is miserable.

This post has been edited by MikeHopley: May 16 2008, 06:01 AM

Hi Mike, yep, php took care of it. The programmer sorted the code out and I only made sure "current" was applied correctly (sometimes it's easy to confuse "class" and "id").