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

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 .submenu { 
display: block; 
left: 100px /* or the width of the menu or even an auto width, don't know if works with auto */ 
} 

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

Answer 2

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

Answer 3

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

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

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

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