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

Question

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

На amazon.com и на walmart.com есть функция всплывающего окна, когда вы наводите курсор на отделы. Он работает аналогично меню, но фактическое прямоугольное окно с полными списками ссылок отображается при наведении курсора.

Я пытаюсь найти название этой функции. Интересно, «всплывающее окно» подходит? И как второй вопрос, есть ли плагины jQuery, которые делают подобные вещи. Я попробовал поискать плагины всплывающих окон, и на самом деле есть несколько, но они, похоже, не то, что я хочу.

1 flyout jquery plugins

Vincent Ramdhanie 10.11.2009 20:24:07

Я считаю, что это просто фантастическая система меню, которая позволяет вам поместить полный HTML внутрь. Возможно, даже использует AJAX-вызов для его рендеринга.

Topher Fangio 10.11.2009 20:26:48

3 ОТВЕТА

РЕШЕНИЕ

Как сказал Алекс ... это не так сложно ... на самом деле, вам нужно сделать простой список в 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 добавьте класс в элемент списка hovered:

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

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

2

Chuy 10.11.2009 21:34:11

Я убеждена. Я должен буду построить свой собственный. Спасибо за стартовый код.

Vincent Ramdhanie 11.11.2009 03:12:07

Я знаю, что другие сайты делают что-то подобное. Вот почему я задавался вопросом, был ли плагин jQuery. Если никто не знает, как это называется, я прибегну к созданию собственного.

Vincent Ramdhanie 10.11.2009 21:12:31

Matthew Jones · Answer 1

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

Alex Bagnolini · Answer 2

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

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

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

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