如何创建 DHTML 菜单？

Question

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

所有项目都水平布局。如果它们比屏幕宽，菜单右侧会出现两个小箭头，允许滚动菜单。像这样的：

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

菜单项应该可以在单元格中的任何位置单击。它们应该垂直和水平拉伸到内容。项目中的文本应垂直和水平居中。该菜单应该可以在 IE7/Opera/FF/Safari 中使用。

滚动是最简单的部分 - 我只是将它全部放在一个容器中（例如，<div>），将容器设置为 overflow: hidden，然后在 JavaScript 中使用 clientWidth、scrollWidth 和 @ 987654326@。我已经想通了，并且已经尝试过了。

但是如何使菜单项如此有弹性、可在任何地方点击并居中文本呢？

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

在任何地方都可以点击很容易：您可以将 onclick 事件触发器（希望有一些光标样式）绑定到原子单元元素，或者您可以使原子单元元素 标记（或者更可能将它们包装在

) 以及适当的链接和样式（填充、边距、foo）。

例如案例一：

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

（显然我并不真正推荐内联样式或脚本处理程序，但你明白了）

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

Answer 3

好的，我和我的上级谈过了，他们认为你不能右键单击菜单项并选择“在新窗口中打开”可能没问题。如果此要求被取消，那么我将不会绑定到链接的<a> 元素。使用 JavaScript，我可以将任何东西变成链接。所以，我选择你，皮卡丘 <table>！

是的，这是异端邪说，但它有效。更具体地说，它是我能想到的唯一可以同时执行以下所有操作的构造：

• 将文本水平和垂直居中；
• 水平和垂直拉伸到内容；
• 当项目开始溢出时不换行到下一行。

任何其他可以做同样的事情可能会更令人不安。在任何人有这个想法之前 - 不，我不需要搜索引擎支持。这是一个内部网络应用程序。如果 Google 可以将其编入索引，那就太糟糕了...