jquery - 网页上的“弹出”的名称是什么

Question

在 amazon.com 和 walmart.com 上，当您将鼠标悬停在部门上方时，会有一个弹出功能。它的工作方式类似于菜单，但在悬停时会显示一个带有完整链接列表的实际矩形窗口。

我正在尝试查找该功能的名称。我想知道“飞出”是否合适？作为第二个问题，是否有 jQuery 插件可以做类似的事情。我尝试搜索弹出插件，实际上有一些，但它们似乎不是我想要的。

Answer 1

正如亚历克斯所说......这并不难......事实上，你要做的就是一个简单的 html 列表：

<div id="menu">
    <ul>
        <li>
            <div class="derpartment-title"><a href="#">Item 1</a></div>
            <div class="submenu">
                <ul>
                    <li><a href="#">Item 1.1</li>
                    <li><a href="#">Item 1.2</li>
                    <li><a href="#">Item 1.3</li>
                </ul>
            </div>
        </li>
        <li>
            <div class="derpartment-title"><a href="#">Item 2</a></div>
            <div class="submenu">
                <ul>
                    <li><a href="#">Item 2.1</li>
                    <li><a href="#">Item 2.2</li>
                    <li><a href="#">Item 2.3</li>
                </ul>
            </div>
        </li>
    </ul>
</div>

然后你只需在 CSS 中隐藏 .submenu 类：

.submenu {
    display: none;
}

并使用 jquery 向悬停的列表元素添加一个类：

$('#menu li').bind('mouseenter',function(){
    $(this).addClass('hovered');
}).bind('mouseleave',function(){
    $(this).removeClass('hovered');
});

然后在您的 CSS 中将相应的属性添加到悬停的子菜单中：

.hovered .submenu {
display: block;
left: 100px /* or the width of the menu or even an auto width, don't know if works with auto */
}

基本上它应该可以使用它......然后你只需添加链接、背景等所需的样式属性。

Answer 2

所以我看了一下网站，它比我想象的还要容易。

与您可以在互联网上找到的其他菜单相比，它缺少特定的效果和动画。

快速浏览一下 firebug，他们将所有内容隐藏并与引用<li>元素相关联（使用 CSS 样式）。
当您将鼠标移至菜单项时，CSS 会从navSaMenuItemMiddleto更改，navSaMenuItemMiddleOpen并且具有绝对位置的 div 会填充菜单项的内容。

脚本是this，它是 Amazon.com 的专有。

Answer 3

我认为它可能类似于 ASP.NET AJAX HoverMenu。