jquery - 网页上的 "flyout"的名称是什么

Question

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

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

Answer 1

正如 Alex 所说...这并不难...事实上，您要做的只是 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 */
}

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