Posted By

indianocean on 11/20/07


Tagged

crossbrowser


Versions (?)

Who likes this?

1 person has marked this snippet as a favorite

vali29


Highlight menu on hover with delay and display submenu


Published in: JavaScript 


  • Adjustable delay until menu appears to prevent accidental activation
  • Snipped out of production sources, needs some generalization.
  • http://alexle.net/archives/169
  • http://www.klevo.sk/javascript/javascripts-settimeout-and-how-to-use-it-with-your-methods/
  • http://www.tomanthony.co.uk/demo/delayedCSSmenu/
  1. // attach events to all menu items
  2. function addHooks()
  3. {
  4. var menuLinks = document.getElementById('head_nav1').getElementsByTagName('a');
  5.  
  6. for(var i = 0; i < menuLinks.length; i++)
  7. {
  8. addEvent(menuLinks[i], "mouseover", activateMenuWithDelay);
  9. addEvent(menuLinks[i], "mouseout", deactivateMenu);
  10. }
  11. }
  12.  
  13. // helper for addHooks(), needed for different browser behaviour
  14. function addEvent (elm, type, fnc)
  15. {
  16. if (window.addEventListener)
  17. {
  18. elm.addEventListener(type, fnc, false);
  19. }
  20. // IE
  21. else
  22. {
  23. elm.attachEvent("on" + type, fnc);
  24. }
  25. }
  26.  
  27. function activateMenuWithDelay()
  28. {
  29. var oThis = this;
  30. var ident;
  31.  
  32. // IE & Opera
  33. if (window.event)
  34. {
  35. srcElm = window.event.srcElement;
  36. ident = srcElm.attributes["ident"].value;
  37. oThis = srcElm;
  38. }
  39. // W3C DOM (FF, Mozilla, Safari)
  40. else
  41. {
  42. ident = this.attributes["ident"].value;
  43. }
  44.  
  45. if(oThis.timer)
  46. {
  47. clearTimeout(oThis.timer);
  48. }
  49. oThis.timer = setTimeout(function() { displaySubMenu.apply(oThis, [ident,oThis]); }, 130);
  50. }
  51.  
  52. function deactivateMenu()
  53. {
  54. var oThis = this;
  55.  
  56. // IE & Opera
  57. if (window.event)
  58. {
  59. oThis = window.event.srcElement;
  60. }
  61.  
  62. if(oThis.timer)
  63. {
  64. clearTimeout(oThis.timer);
  65. }
  66. }

Report this snippet 

You need to login to post a comment.