使用Java脚本创建下拉菜单

Question

有关逻辑的问题在这里：

使菜单在鼠标悬停/鼠标悬停时显示/消失的最优雅的方法是什么？

请参阅以下JsBin：

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

默认情况下，菜单是隐藏的。

如果用户将光标移到“链接”上方，则会调用showme（）函数。

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

当用户将鼠标从“链接”移到菜单上方时，如何保持菜单不变？

还是这都是错误的思想流派？

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中隐藏子菜单并定义submenu：hover离开display：block

• 将鼠标悬停在菜单项上，以显示子菜单（您可以只切换课程或其他内容，然后在大约5秒钟后再次切换。）

• 希望对您有用。 这里的想法是，将鼠标悬停在菜单项上以显示子菜单，然后悬停选择器将保持菜单显示，最后当用户将悬停选择器停下来时。

我不记得我以前是怎么做到的，因为这是一件即时的事情，但是这个想法就在那里。

Answer 4

不知道这是您要找的内容，还是请检查一下！

http://jsfiddle.net/5NmTB/

如果您有任何问题请告诉我

Answer 5

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