What is the name of the "flyout" on web pages

Question

On amazon.com and on walmart.com there is a flyout feature when you hover over the departments. It works similar to a menu but an actual rectangular window with full lists of links are displayed on hover.

I am trying to find the name of that feature. I wonder of "flyout" is appropriate? And as a second question are there jQuery plugins that do similar things. I tried searching flyout plugins and there are actually a few but they don't seem to be what I want.

Answer 1

I think it might be similar to the ASP.NET AJAX HoverMenu.

Answer 2

So I took a look at the website and it is even easier than I thought.

Compared to other menus you can find in the internet, this lacks particular effects and animations.

Having a quick look with firebug, they keep all the content hidden and associated to the referring <li> element (styled with CSS).
When you over with the mouse to a menu item, the CSS changes from navSaMenuItemMiddle to navSaMenuItemMiddleOpen and a div with absolute position is filled with the content of the menu item.

The script is this, and it is proprietary of Amazon.com.

Answer 3

As Alex said... it's not that hard... in fact, what you have to do is a simple list in 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>

Then you just hide the .submenu class in CSS:

.submenu {
    display: none;
}

And with jquery add a class to the hovered list element:

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

then in your CSS add the respective properties to the hovered submenu:

.hovered .submenu {
display: block;
left: 100px /* or the width of the menu or even an auto width, don't know if works with auto */
}

and basiclly it should work with it... then you just add the style properties you need for links, backgrounds, etc.