Sprites-based image menu with text dropdown?

HTML & CSS
1

after the conversation in a previous thread, and a new project I’m taking on, I’m looking for a solution for a nav bar. it seems there are SO many different ways out there, and each has its own set of accessibility issues.

so: what is the (current) right way to do a horizontal, unordered list, image-based menu with text dropdowns? I’d like to use a single sprite for the nav image states if at all possible.

opinions?? something that will degrade well with images off, css off, and any other combination therein :wink:

2

that’s the setup i’m using - except i have classes on the list items and not id’s.
just spent a long time trying to get it to work… may have found a solution but still tweaking. i’d love to see/hear about examples of solutions other people have come up with tho!

3

Here is the best sprite setup. Adding a drop to it “should” be simple enough - never done that though.

4

Hi pas,
I just got through helping another member set up a “sprite nav with replacement text and dropdown” the other day.

(That example is rather odd though since the links change widths on hover to accommodate the wing shaped image)

The thing that tripped me up was that I used IDs’ for the list items. That is normally what you would want to do so you can set a class on the body element for page specific link highlighting. We do that so IE6 does not choke on concatenated selectors using dual IDs’ or Classes.

The problem it caused for me in that example above was that it put too much weight on the list item with the dropdown. I wound up having to target a sub ul in the “network” list item only. It was okay since it was the only dropdown but if thre is another one then the selectors would need to be repeated for another ID.

It would have been okay if I had of used a class but then that would make things difficult for setting up a body class. It would bring up the IE6 problem again in that I would be using dual classes or I would of had to set an ID on the body which really defeats the purpose.

My question is: are you going to have page specific link highlighting while using a dropdown. It will be fine in all other browsers but IE6 might give you some problems.