Menu 如何创建DHTML菜单？

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

所有项目均水平布置。如果它们比屏幕宽，菜单右侧会出现两个小箭头，可以滚动。大概是这样的：

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

+--------+--------+-------+---+---+
|项目1 |项目2 |项目3 |<|>|
+--------+--------+-------+---+---+

菜单项应可在单元格中的任何位置单击。它们应垂直和水平延伸至内容物。项目中的文本应垂直和水平居中。菜单应该在IE7/Opera/FF/Safari中工作

滚动是最简单的部分-我只需将其全部放在一个容器中（例如，一个

），将容器设置为

溢出：隐藏

，然后在Javascript中使用

clientWidth

、

scrollWidth

和

scrollLeft

。我已经想出来并且已经试过了

但是如何使菜单项如此有弹性，可以在任何地方单击并居中显示文本？

尝试下面的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>

---

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

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

中），并适当地链接和设置样式（填充、边距、foo）

e、 g.案例1：

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

foo

（显然，我并不真的推荐内联样式或脚本处理程序，但你知道的）

---

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

好的，我和我的上级谈过，他们认为您不能右键单击菜单项并选择“在新窗口中打开”可能是可以的。如果这个要求被删除，那么我就不会绑定到链接的

元素。使用JavaScript，我可以将任何内容转换为链接。因此，我选择了你，皮卡乔

是的，这是异端邪说，但有效。更具体地说，这是我能想到的唯一一个可以同时完成以下所有工作的结构：

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

---

不管怎样，任何其他能够做到这一点的事情都可能会更加令人震惊。在任何人有想法之前-不，我不需要搜索引擎支持。它是一个内部web应用程序。如果谷歌能将其编入索引，那将是非常糟糕的…

如果我这样做，当空间变小时，浮动将开始堆叠。我需要它们溢出，这样我可以使用滚动。另外，它们不会都是相同的高度，所以垂直居中会见鬼去。明白。您可以通过display:table来完成这一点，我将更新我的答案。display:table不会在早期出现跨浏览器的情况。除了IE7不理解display:table.：（如果有办法让IE这样工作的话，我也可以只制作IE样式表。我不知道会有多少行文本，所以我希望它们都垂直拉伸，然后垂直居中。因此，垂直居中填充是不可行的。这是一个非常特殊的情况解决方案，这不是面向web的s的前进方向正如我所说的——内部web应用程序。见鬼，我们实际上只针对IE和FF。其余浏览器是我自己设计的。另外，如果你担心对Javascript的依赖性——这是不可避免的，因为它是AJAX