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在hovered list元素中添加一个类：

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

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

.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，他们将所有内容隐藏并与引用的<li>元素（使用CSS设置样式）相关联。
当您将鼠标移到菜单项时，CSS会从navSaMenuItemMiddle更改为navSaMenuItemMiddleOpen，并且具有绝对位置的div将填充菜单项的内容。

该脚本为this，并且是Amazon.com的专有。

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

3 个答案: