Question

关于逻辑的问题：

菜单在onmouseover / onmouseout上显示/消失的最优雅方式是什么？

请参阅以下JsBin：

http://jsbin.com/owayeb/edit#source

默认情况下隐藏菜单。

如果用户将光标移到Link上方，则调用showme（）函数。

当用户移开光标时，会调用hideme（）函数。

当用户将鼠标从Link上移到菜单上方时，如何让菜单保持不变？

或者这是错误的思想流派？

Answer 1

假设这是用于级联导航或类似的东西，我会做类似的事情......

<style type="text/css">
ul#nav li {
    position: relative;
    height: 20px;
}
ul#nav li ul {
    display: none;
    position: absolute;
    top: 20px;
}
ul#nav li.selected ul { display: block; }
</style>

<ul id="nav">
<li>
    <a href="#" title="Link">Link</a>
    <ul>
        <li><a href="#" title="">Hi There!</a></li>
        <li><a href="#" title="">Secone Nav Item</a></li>
        ...
    </ul>
</li>
</ul>

在列表项的onmouseover状态中，您可以将.selected类添加到#nav，从而导致显示所有子UL。由于子UL元素在ul＃nav中，因此当你翻过孩子时，你的悬停状态仍然有效。

您显然需要调整CSS以匹配您想要的所需外观，但这是一般的想法。例如，如果您使用原型js，那么您的javascript看起来就像......

$$('#nav li').each(function(x) {
    x.onmouseover = function() { $(this).addClassName('selected'); }
    x.onmouseout = function() { $(this).removeClassName('selected'); }
});

Answer 2

你可以将相同的onmouseover监听器添加到drop div，以便它保持打开状态：

<div id="drop" class="dropdown" onmouseover="showme('drop')" onmouseout="hideme('drop')">
    Hi there!
  </div>

Answer 3

我做过的最好也是最简单的方法是使用：hover选择器来显示子菜单。

以下是我将如何解决这个问题：
1.定义菜单结构

<ul id='menu'>
  <li>Menu Item</li>
  <ul id='submenu'>
    <li>Sub menu item 1</li>
    <li>Sub menu item 2</li>
  </ul>
</ul>

在css中隐藏子菜单并定义子菜单：将鼠标悬停在display：block
附加到菜单项，onmouseover显示子菜单（您可能只需切换一个类或其他东西，然后在5秒后再次切换。）
希望这适合你。这里的想法是你将鼠标悬停在菜单项上以显示子菜单，然后悬停选择器将保持菜单显示，最后当用户将鼠标悬停在悬停选择器上时停止。

之前不能记得我之前是怎么做的，因为这是一个动态的事情，但这个想法就在那里。

Answer 4

不确定这是否是您正在寻找的，但请查看它！

http://jsfiddle.net/5NmTB/

如果您有疑问，请告诉我

Answer 5

我使用superfish jQuery插件来构建Javascript下拉菜单。 Superfish是一个增强的Suckerfish风格菜单jQuery插件，它采用现有的纯CSS下拉菜单（因此它在没有JavaScript的情况下优雅地降级）并添加了一些有用的增强功能。

使用Javascript创建下拉菜单

5 个答案: