I need to create a DHTML menu with the specified features, but I can't figure out how to do it. Here's what I need:
All items are layed out horizontally. If they would be wider than the screen, two little arrows appear on the right side of the menu that allow to scroll it. Something like this:
+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+
Menu items should be clickable anywhere in the cell. They should stretch both vertically and horizontally to the contents. The text in the items should be centered both vertically and horizontally. The menu should work in IE7/Opera/FF/Safari.
The scrolling is the easy part - I just place it all in a container (say, a <div>
), set the container to overflow: hidden
and then play around in Javascript with clientWidth
, scrollWidth
and scrollLeft
. That I've figured out and have already tried.
But how to make the menu items so stretchy, clickable anywhere and centered text?