0

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

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

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

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

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

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

4

3 回答 3

2

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

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

于 2008-12-09T14:18:15.400 回答
1

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

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

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

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

于 2008-12-09T15:12:30.830 回答
-2

随处可点击很容易：您可以将 onclick 事件触发器（希望有一些光标样式）绑定到原子单元元素，或者您可以将原子单元元素设置为 <a> 标记（或者更可能将它们包装在 <li> 中）和适当的链接和样式（填充，边距，foo）。

例如案例1：

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

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

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

于 2008-12-09T14:21:26.940 回答