如何创建DHTML菜单？

Question

我需要创建一个具有指定功能的DHTML菜单，但是我不知道怎么做。这是我需要的：

所有的项目都水平布局。如果它们比屏幕更宽，菜单的右侧会出现两个小箭头，用于滚动菜单。如下所示：

+--------+--------+-------+---+---+
| Item 1 | Item 2 | Item 3| < | > |
+--------+--------+-------+---+---+

菜单项应该可以在单元格中的任意位置单击。它们应该垂直和水平地延伸到内容。项目中的文本应该在垂直和水平方向上居中。该菜单应在IE7/Opera/FF/Safari中工作。

滚动是最简单的部分--我只需要把它全部放在一个容器中(比如一个<div>)，将容器设置为overflow: hidden，然后在Javascript中使用clientWidth、scrollWidth和scrollLeft播放。我已经想通了并且已经尝试过了。

但是如何使菜单项如此具有伸缩性，可在任意位置点击并居中显示文本？

Answer 1

尝试下面的CSS：

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

然后设置菜单格式，如下所示：

<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>

这将强制垂直对齐，并防止链接换行。让我们知道它是如何工作的。

Answer 2

clickable anywhere很简单:您可以将onclick事件触发器(希望还有一些光标样式)绑定到原子单元格元素，也可以将原子单元格元素标记(或者更可能将它们包装在其中)，并适当地链接和设置样式(padding、make、foo)。

例如案例1：

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

(显然，我并不推荐使用内联样式或脚本处理程序，但您应该明白了)

应用填充将有效地居中文本，并且没有指定宽度，它们将自然地拉伸以适合其内容。