Flyout Menu Tutorials

Read The Full Tutorial.

Fly-out menu is a tool designed to help you access your favorite sections and stories,and allow you to display multiple menu items without cluttering the page.

Here you can learn how to Create a simple fly-out menu:

var $menu = $('ul.menu_options');

//hide all of the menus
$menu.hide();

$('a.trigger').each(function(index) {
 $(this).click(function() {
  //identify the clostest menu
  $nextMenu = $(this).next($menu);
  if ($nextMenu.is(":visible")) {
   $nextMenu.fadeOut('fast').css('z-index', '50');
  } else {
   $menu.hide(); //close all other open menus
   $nextMenu.show().css('z-index', '500'); //z-index for good measure
  }

  return false;
 });
});

but it have a problem that the menu hangs around until you click the trigger again to close it.

Here is the ideal behavior:

    * If you trigger the menu and do nothing, it will go away after n seconds.
    * If you trigger the menu and mouseover it, it will stay there.
    * When you mouse leaves the menu, it will go away after n seconds.

var $menu = $('ul.menu_options');
var $open = $('a.trigger');

//create an emtpy object to keep track of the timeouts
var menuTimeouts = {};

//hide all of the menus
$menu.hide();

$open.each(function(index) {
 $(this).click(function() {
  //identify the clostest menu
  $nextMenu = $(this).next($menu);
  if ($nextMenu.is(":visible")) {
   $nextMenu.fadeOut('fast').css('z-index', '50');

                        //clear the active setTimout
   if (menuTimeouts[$id]) {
    clearTimeout(menuTimeouts[$nextMenu.attr('id')]);
           menuTimeouts[$nextMenu.attr('id')] = undefined;
                  }
  } else {
   $menu.hide(); //close all other open menus
   $nextMenu.show().css('z-index', '500'); //z-index for good measure

   //start a unique setTimeout for this menu
   menuTimeouts[$nextMenu.attr('id')] = setTimeout(function () {
    //fade the menu out after 2 seconds
    $nextMenu.fadeOut('slow');
   }, 2000)
  }

  return false;
 });
});

$menu.find('li').mouseenter(function (event) {
 //store the ID of this trigger's closest menu
 var $id = $(this).parents('ul').attr('id');

 //cancel the timeOut when the mouse is over the menu
 if (menuTimeouts[$id]) {
  clearTimeout(menuTimeouts[$id]);
  menuTimeouts[$id] = undefined;
 }
}).mouseleave(function () {
 var $this = $(this).parents('ul');

 //start another time when the mouse leaves the menu
 menuTimeouts[$this.attr('id')] = setTimeout(function () {
  $this.fadeOut('slow');
 }, 2000);
});