jQuery下拉导航菜单库一次打开

时间:2014-06-10 17:51:11

标签: javascript jquery jquery-ui superfish

我正在尝试实施与哈佛网站类似的菜单行为:http://www.seas.harvard.edu/computer-science 无论您将鼠标放在哪个链接上,所有部分都会下拉。

有人知道他们正在使用什么吗?我能找到的最接近的是jQuery Superfish菜单,但它只允许一次打开一个菜单部分。

提前谢谢!

1 个答案:

答案 0 :(得分:1)

我创建了一个demo on JSFiddle来描述我在评论中所说的内容。您正在寻找的特定结果是对普通下拉菜单的简单修改。不要让每个下拉列表都是他们自己独立的div,而是将它们放在容器div中,并在需要下拉时显示它。

所以而不是:

<div id="drpDwn1"></div>
<div id="drpDwn2"></div>
<div id="drpDwn3"></div>

你有:

<div id="drpDwnFull">
    <div id="drpDwn1"></div>
    <div id="drpDwn2"></div>
    <div id="drpDwn3"></div>
</div>

您可以更改drpDwnFull的可见性,而不是单个项目,以获得完整的菜单效果。

然后您可以根据需要添加突出显示。在我的演示中,我选择突出显示与菜单项相关的菜单,以及您正在悬停的单个项目。