Enabling hoverIntent breaks the menu in IE8?

[r1chw]

Hi there,

I find this menu really well made. There is however one issue which I haven't been able to resolve. It seems without hoverIntent enabled the menu can sometimes be a bit glitchy in certain situations of mouseover/mouseout where the menu drop down can activate and deactivate very quickly causing an almost strobing effect, then sometimes the menu wont reset its self - i.e one of the drop downs will remain 'down' or active, so subsequent hovering over other navigation items with child elements cause more than one drop down active. So, hoverIntent for me seems to address those issues really well, but...

I have recently noticed by enabling hoverintent it causes massive issues in IE8. There must be some kind of conflict with how I have set the page up. I have tried a few versions of jQuery along with the latest hoverIntent plugin.

Has anybody encountered this issue or is there something I am missing?

I've setup a couple of links with a stripped down version of the page. These links are the same as the demo examples but I have removed the video.

http://sites.imgd.co.uk/flexnav-hoverintent/ (with hover intent, navigation doesn't work in IE8)

http://sites.imgd.co.uk/flexnav/ (without hover intent, menu not as smooth but works in IE8 )

Any ideas?

Many thanks Rich

[niallthompson]

Hi Rich,

I am having the same issue. Did you find a workaround?

[r1chw]

Hello! Late reply I know. Basically I didnt get to the bottom of the issue so at the moment I have kept the support for IE8 (typically as the client uses it) which make the navigation a bit glitchy in the more modern browsers. Did you get anywhere? As I am going to be working on updating the project soon I might need to move away from flexnav and build a custom navigation if there isn't workaround to get it working smoothly in modern browsers.

[r1chw]

Although this might not be the most elegant solution, it seems to do the trick. Flexnav works fine without JS in IE7 and IE8 so its a case of only initiating it when the browser is not equal to IE7 or IE8.

if((window.navigator.userAgent.indexOf('MSIE 8') == -1)||(window.navigator.userAgent.indexOf('MSIE 7') == -1)){
//Not i.e 7 or 8
$(".flexnav").flexNav({
          'animationSpeed': 250, // default for drop down animation speed
          'transitionOpacity': true, // default for opacity animation
          'buttonSelector': '.menu-button', // default menu button class name
          'hoverIntent': true, // Change to true for use with hoverIntent plugin
          'hoverIntentTimeout': 350, // hoverIntent default timeout
          'calcItemWidths': false, // dynamically calcs top level nav item widths
          'hover': true // would you like hover support?      
      });
  }

Let me know if it works or if you find another solution!