tags:

views:

193

answers:

3

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?

+2  A: 

Try the CSS below:

#menu {
  display: table; 
}   
#menu a {
    display:table-cell; 
    vertical-align:middle;
}

And then format your menu like:

<div id="menu">
    <a href="#">normal text</a>
    <a href="#"><big>large text</big></a>
    <a href="#"><span style="line-height:100px;">very tall text</span></a>
</div>

This will force vertical alignment and prevent the links from wrapping. Let us know how it works out.

Chris Pebble
If I do that the floats will start to stack when the space is to narrow. I need them to overflow so I can use the scrolling.
Vilx-
Plus, they won't all be the same height so vertical centering goes to hell.
Vilx-
Understood. You can accomplish this with display:table, I'll update my answer.
Chris Pebble
display: table isn't going to be cross-browser happy
annakata
Nearly there. Except that IE7 doesn't understand display:table. :( I could make IE-only stylesheet too, if there was a way to make IE work this way.
Vilx-
A: 

clickable anywhere is easy: you can either bind the onclick event trigger (and hopefully some cursor styling) to the atomic cell element, or you can make the atomic cell elements <a> tags (or more likely wrap these in <li>) and link and style appropriately (padding, margin, foo).

e.g. case 1:

<ul id="menu"><li class="item" onclick="foo()" style="cursor:pointer; cursor:hand; padding:1em; margin:1px; float: left;">FOO!</li></ul>

(obviously I don't really recommend inline styling or script handlers but you get the idea)

Applying padding will effectively centre the text, and having no width assigned they'll naturally stretch to fit their content.

annakata
I don't know how many lines of text there will be so I'd like them to ALL stretch vertically AND center vertically after that. Thus, padding for vertical centering is a no-go.
Vilx-
+1  A: 

OK, I talked with my superiors and they decided that it might be OK that you cannot right-click a menu item and select "Open in New Window". If this requirement is dropped, then I'm not bound to <a> elements for links. With JavaScript I can turn anything into a link. Thus, I choose you, pikachoo <table>!

Yap, it's a heresy, but it works. More specifically, it's the only construct that I can think of that can do all of the following at the same time:

  • Center text horizontally and vertically;
  • Stretch to contents horizontally and vertically;
  • Not wrap to next line when items are starting to overflow.

Anything else that can do the same will probably be more convulted anyway. And before anyone has the idea - no, I don't need search engine support. It's an internal web application. It'd be pretty bad if Google could index that...

Vilx-
this makes for a very special case solution, this is not the way forward for a web-facing site
annakata
As I said - internal web application. Hell, we're actually targeting only IE and FF. The rest of the browsers are my own initiative. Plus, if you're worried about the dependancy on Javascript - it's inevitable anyway since it's AJAX. ;)
Vilx-