https://www.katiedrummer.com/classes/commons/resources/flyoutmenu/flyoutmenu.js?1000862

1var flyoutMenu = flyoutMenu || {};
2
3(function(){
4
5  flyoutMenu.flyoutTimer = null;
6
7  flyoutMenu.initFlyoutMenu =  function(menuData, mode) {
8
9    for(var i = 0; i < menuData.length; i++) {
10
11      var menuItem = $("#ys_menu_" + i);
12
13      var subMenuPanelHTML = "<div id='ys_submenu_"+ i + "' class='ys_submenu' style='font-size:" + menuItem.css("font-size") + "; font-family:" + menuItem.css("font-family") + "'><div class='ys_submenu_inner'><ul>";
14      for(var j = 0; j < menuData[i].children.length; j++) {
15        subMenuPanelHTML += "<li onclick='window.location.href = \""+menuData[i].children[j].href+"\";'><a href='"+ menuData[i].children[j].href +"'>"+ menuData[i].children[j].name +"</a></li>";
16      }
17      subMenuPanelHTML += "</ul></div></div>";
18      $("body").append(subMenuPanelHTML);
19
20      var newSubMenuPanel = $("#ys_submenu_" + i);
21
22      menuItem.mouseenter({value:i, mode:mode, data:menuData}, function(event){
23
24        window.clearTimeout(flyoutMenu.flyoutTimer);
25
26        for(var i = 0; i < menuData.length; i++) {
27          if(i == event.data.value) {
28            continue;
29          }
30          var subMenuPanel = $("#ys_submenu_" + i);
31          subMenuPanel.css("display", "none");
32
33
34        }
35
36        var subMenuPanel = $("#ys_submenu_" + event.data.value);
37
38        if(event.data.mode == "flyover_vertical") {
39          var menuItem = $("#ys_menu_" + event.data.value).find("a");
40          var offset = menuItem.offset();
41          subMenuPanel.css("top", offset.top);
42          subMenuPanel.css("left", offset.left + menuItem.outerWidth() + 10);
43        } else {
44          var menuItem = $("#ys_menu_" + event.data.value).find("a");
45          var offset = menuItem.offset();
46          subMenuPanel.css("top", offset.top + menuItem.outerHeight());
47          subMenuPanel.css("left", offset.left + parseInt(menuItem.css("padding-left")));
48        }
49
50        subMenuPanel.fadeIn("fast");
51
52        if(subMenuPanel.outerWidth() < 150) {
53          subMenuPanel.css("width", 150);
54        }
55      });
56
57      menuItem.mouseleave({value:i}, function(event){
58        var subMenuPanel = $("#ys_submenu_" + event.data.value);
59        flyoutMenu.flyoutTimer = window.setTimeout(function(){subMenuPanel.fadeOut("fast");}, 300);
60      });
61
62
63      newSubMenuPanel.mouseenter({value:i, mode:mode, data:menuData}, function(event){
64
65        window.clearTimeout(flyoutMenu.flyoutTimer);
66
67        for(var i = 0; i < menuData.length; i++) {
68          if(i == event.data.value) {
69            continue;
70          }
71          var subMenuPanel = $("#ys_submenu_" + i);
72          subMenuPanel.css("display", "none");
73
74        }
75
76        var subMenuPanel = $("#ys_submenu_" + event.data.value);
77        if(event.data.mode == "flyover_vertical") {
78          var menuItem = $("#ys_menu_" + event.data.value).find("a");
79          var offset = menuItem.offset();
80          subMenuPanel.css("top", offset.top);
81          subMenuPanel.css("left", offset.left + menuItem.outerWidth() + 10);
82        } else {
83          var menuItem = $("#ys_menu_" + event.data.value).find("a");
84          var offset = menuItem.offset();
85          subMenuPanel.css("top", offset.top + menuItem.outerHeight());
86          subMenuPanel.css("left", offset.left + parseInt(menuItem.css("padding-left")));
87        }
88        subMenuPanel.css("display", "block");
89      });
90
91      newSubMenuPanel.mouseleave({value:i}, function(event){
92        var subMenuPanel = $("#ys_submenu_" + event.data.value);
93        flyoutMenu.flyoutTimer = window.setTimeout(function(){subMenuPanel.fadeOut("fast");}, 300);
94      });
95    }
96  }
97})();