There seems to be some confusion amongst the users of our site about exactly why our WordPress menu plugins include javascript files, yet work fine without it, so here is an explanation. If none of this makes sense to you and you are using one of our WordPress menu plugins, don’t worry! Our plugins handle all of this stuff for you automatically so you don’t need to.

:hover pseudo class

It has been known for a long time that it is possible to create dropdown menus purely using nested HTML blocks and the :hover CSS pseudo class. Unfortunately, although almost every single web browser added support for this feature a long time ago, Microsoft decided to drag it’s heels and waited a horrendously long time before eventually launching Internet Explorer 7 (IE7) which finally had support for the :hover pseudo class. Many users still do, and likely will for many years to come, use Internet Explorer 6 (IE6) as their browser. There are many, many reasons why they shouldn’t be using it, but unfortunately some users either refuse to upgrade, don’t know how or are simply stuck on an old school corporate intranet without the ability to upgrade. For this reason a slew of methods via javascript have been created to add support for the :hover pseudo class into IE6 and older browsers. This is the reason that all of our WordPress menu plugins use javascript, they work without the javascript in all modern browsers, but for Internet Explorer 6 and older browsers they use a javascript to allow the menus to still operate.

Suckerfish and conditionals

The suckerfish script is the standard script used to add the same effect as the :hover pseudo class in IE6. In the past, it was common place to simply load the file for every page load, however now that IE6 does not have a 90%+ hold on the browser market place it is advisable to only serve the scripts to those browsers that need it. The best way to serve the file only to those older browsers is to place a link to an external script via IE conditional comments like this:

[code lang=”html”]<!–[if lte IE 7]>
<script type="text/javascript" src="suckerfish_ie.js"></script>
<![endif]–>[/code]

You could alternatively include the code directly on the page itself, but this increases the page load slightly for all browsers rather than just limiting it to the old clunkers like IE6. With conditionals you can save quite a few lines of code on every page load.

Once you have a Suckerfish script running on your page, you can apply a class (usually .sfhover for most scripts) to the CSS and use that for IE6 instead of the :hover pseudo class.

Why we need to use IE7, not IE6 conditionals

You may have noticed that the above code is written to serve the Suckerfish script to IE7 and older browsers, despite IE7 already featuring support for the :hover pseudo class. Previously this would have been considered silly as it would only slow down the loading of a page in IE7. However decided to add a compatibility mode into Internet Explorer 8 (IE8) which it says “will behave just like IE7”. However this is entirely incorrect as IE8 compatibility mode does not support the :hover pseudo class at all. Most of the time this would not matter, but if a user is browsing your site and for whatever reason decides to click the “compatibility mode” button, they would not be able to use your menu if there was no javascript being served to it, and since it considers itself to be IE7 it will not follow IE6 conditional comments. For this reason, we must now place the script inside IE7 conditionals as above.

Coming soon will be a blog post about alternatives to the Suckerfish script, the best versions to use and how to setup your custom HTML.