Как называется «всплывающее окно» на веб-страницах?

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>

Тогда вы просто скрываете класс .submenu в CSS:

.submenu {
    display: none;
}

И с помощью jquery добавьте класс в элемент списка зависаний:

$('#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

Итак, я взглянул на сайт, и это даже проще, чем я думал.

По сравнению с другими меню, которые вы можете найти в Интернете, в нем отсутствуют определенные эффекты и анимация.

Быстро просматривая Firebug, они сохраняют все содержимое скрытым и связываются со ссылочным элементом <li> (в стиле CSS).
Когда вы переходите мышью к элементу меню, CSS изменяется с navSaMenuItemMiddle на navSaMenuItemMiddleOpen, а div с абсолютной позицией заполняется содержимым пункта меню.

Сценарий это , и он является собственностью Amazon.com.

Answer 3

Я думаю, что это может быть похоже на ASP.NET AJAX HoverMenu .