Full-width horizontal menu(navbar) about superfish HOT 3 CLOSED

Hello,

This is an interesting experiment. I'm kind of surprised it (sort-of) works with the table mark-up (it looks like keyboard navigation is broken).

Personally, I'd let IE7 and below degrade gracefully by allowing the menu to not be full width. That way you don't have to abuse the table element and break keyboard support, and having the design be usable but aesthetically less-than-optimal in IE7 is about as much as it deserves nowadays.

The first thing I'd try though (I haven't looked at this cross-browser, so you may have already tried and discounted this) would be to just set a percentage width on the top level list items (although you need to know how many items there will be ahead of time). I have forked your jsfiddle, removed the table markup and demonstrated the percentage width idea here.

from superfish.

Hi,
I admit that i didn't check all the functionality.
My problems started with the client requiring to have the same UX, on all browser including IE6 :| can't do much as I'm only a consultant on the firm that builds the app for this client.
The problem with the percentage width is that the menu changes the number of the First Level Elements, and the length of the label varies and I would have to give them different values.
When I've wrote the "patch" and saw how little changes it took I thought it would be nice sharing.
By the way your example has a problem ... try to set the width of the top UL for example to 400px, the UL respects the width but the last A text finishes off the rectangle (Chrome, IE10,)

from superfish.

I think you should use display:table for good browsers, and for older IE use your idea of calculating the width with JS, but change it to set the top-level list item width to 100% divided by number of top-level items. This would be a simpler and more flexible solution than calculating pixel widths.

As for the problem with my jsfiddle, that's just because 400px is too narrow to fit the items on one line. If you want the text to wrap then just remove the white-space css. Then you'll have to battle with the vertical height, though.

from superfish.