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.
Solution
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.
OTHER TIPS
I think it might be similar to the ASP.NET AJAX HoverMenu.
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.