Question

我需要创建一个具有指定功能的DHTML菜单，但我无法弄清楚如何做到这一点。这就是我需要的：

所有物品都水平放置。如果它们比屏幕宽，则菜单右侧会出现两个小箭头，可以滚动它。像这样：

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

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

滚动是一个简单的部分 - 我只是将它放在一个容器中（比如<div>），将容器设置为overflow: hidden，然后使用clientWidth在Javascript中播放，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

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

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

水平和垂直居中文字;
水平和垂直拉伸内容;
当项目开始溢出时，不会换行到下一行。

无论如何，任何其他可以做同样事情的人都可能会更加焦虑。在任何人有这个想法之前 - 不，我不需要搜索引擎支持。这是一个内部Web应用程序。如果谷歌能够将其编入索引，那将是非常糟糕的......

Answer 3

任何地方都可以轻松点击：你可以将onclick事件触发器（希望是一些光标样式）绑定到原子单元元素，或者你可以制作原子单元元素＆lt; a＆gt;标签（或者更可能将它们包装在＆lt; li＆gt;中）并适当地链接和样式（填充，边距，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>

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

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

如何创建DHTML菜单？

3 个答案: