“弹出窗口”的名称是什么？在网页上

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

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

Answer 3

于是我看了一下网站，发现比我想象的还要简单。

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

使用 firebug 快速查看一下，它们将所有内容隐藏并与引用的

元素（使用 CSS 样式化）关联。
当您将鼠标悬停在菜单项上时，CSS 会从 navSaMenuItemMiddle 更改为 navSaMenuItemMiddleOpen，并且具有绝对位置的 div 会填充菜单项的内容。

该脚本是 此，它是 Amazon.com 的专有权利。