Customized jQuery Delayed Drop Down Menu Widget


/ Published in: jQuery
Save to your folder(s)

This is a customized jQuery drop down menu that displays sub-menus upon hover with delay before returning to active tab.


Copy this code and paste it in your HTML
  1. /*
  2.  * AllProWebMenu - jQuery menu widget
  3.  */
  4.  
  5. ;(function($){
  6. $.fn.superfish = function(op){
  7.  
  8. var sf = $.fn.superfish,
  9. c = sf.c,
  10. $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
  11. over = function(){
  12. var $$ = $(this), menu = getMenu($$);
  13. clearTimeout(menu.sfTimer);
  14. $$.showSuperfishUl().siblings().hideSuperfishUl();
  15. },
  16. out = function(){
  17. var $$ = $(this), menu = getMenu($$), o = sf.op;
  18. clearTimeout(menu.sfTimer);
  19. menu.sfTimer=setTimeout(function(){
  20. o.retainPath=($.inArray($$[0],o.$path)>-1);
  21. $$.hideSuperfishUl();
  22. if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
  23. },o.delay);
  24. },
  25. getMenu = function($menu){
  26. var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
  27. sf.op = sf.o[menu.serial];
  28. return menu;
  29. },
  30. addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
  31.  
  32. return this.each(function() {
  33. var s = this.serial = sf.o.length;
  34. var o = $.extend({},sf.defaults,op);
  35. o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
  36. $(this).addClass([o.hoverClass,c.bcClass].join(' '))
  37. .filter('li:has(ul)').removeClass(o.pathClass);
  38. });
  39. sf.o[s] = sf.op = o;
  40.  
  41. $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
  42. if (o.autoArrows) addArrow( $('>a:first-child',this) );
  43. })
  44. .not('.'+c.bcClass)
  45. .hideSuperfishUl();
  46.  
  47. var $a = $('a',this);
  48. $a.each(function(i){
  49. var $li = $a.eq(i).parents('li');
  50. $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
  51. });
  52. o.onInit.call(this);
  53.  
  54. }).each(function() {
  55. var menuClasses = [c.menuClass];
  56. if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
  57. $(this).addClass(menuClasses.join(' '));
  58. });
  59. };
  60.  
  61. var sf = $.fn.superfish;
  62. sf.o = [];
  63. sf.op = {};
  64. sf.IE7fix = function(){
  65. var o = sf.op;
  66. if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
  67. this.toggleClass(sf.c.shadowClass+'-off');
  68. };
  69. sf.c = {
  70. bcClass : 'sf-breadcrumb',
  71. menuClass : 'sf-js-enabled',
  72. anchorClass : 'sf-with-ul',
  73. arrowClass : 'sf-sub-indicator',
  74. shadowClass : 'sf-shadow'
  75. };
  76. sf.defaults = {
  77. hoverClass : 'sfHover',
  78. pathClass : 'overideThisToUse',
  79. pathLevels : 3,
  80. delay : 1500,
  81. animation : {opacity:'show'},
  82. speed : 'fast',
  83. autoArrows : false,
  84. dropShadows : false,
  85. disableHI : false, // true disables hoverIntent detection
  86. onInit : function(){}, // callback functions
  87. onBeforeShow: function(){},
  88. onShow : function(){},
  89. onHide : function(){}
  90. };
  91.  
  92. $.fn.extend({
  93. hideSuperfishUl : function(){
  94. var o = sf.op,
  95. not = (o.retainPath===true) ? o.$path : '';
  96. o.retainPath = false;
  97. var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
  98. .find('>ul').hide().css('visibility','hidden');
  99. o.onHide.call($ul);
  100. return this;
  101. },
  102. showSuperfishUl : function(){
  103. var o = sf.op,
  104. sh = sf.c.shadowClass+'-off',
  105. $ul = this.addClass(o.hoverClass)
  106. .find('>ul:hidden').css('visibility','visible');
  107. sf.IE7fix.call($ul);
  108. o.onBeforeShow.call($ul);
  109. $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
  110. return this;
  111. }
  112. });
  113.  
  114.  
  115.  
  116. })(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.