Non-Stick Suckerfish

– 2008-06-19 15:36

Suckerfish Navigation Sticking in IE7?

After talking to a number of my web designer friends I discovered that the old Suckerfish dropdown menus don’t work anymore. The problem is, of course, that IE7 has found a new way to be incompatible.

Such a shame too. I always liked the Suckerfish technique. Shortly after beginning employment at Einstein Industries, I recommended converting to Suckerfish. At the time they were using the yp_slideout javascript. That one was buggy, slowed down production, and had browser compatibility issues.

The Problem

You can see that some of these menus “stick” now. A user will mouseover. The drop down will appear. The user will then mouseout and the menus do not go away.

One Solution

Naturally, the first solution that sprang to mind was: “Google it”. And, through Google, I did find the position: static; solution. Unfortunately, this particular solution did not work in some of the projects currently being worked on. Bummer, it looked so easy too.

The Solution That Worked For Me

Up until this new Internet Explorer bug was revealed in version 7, I had only one problem with Suckerfish. It does not utilize a Javascript library. So, I decided maybe it was time to start Googling for a jQuery pull down menu replacement.

Ask and Google shall answer! I found a solution that leaves all of the Suckerfish CSS intact. All you have to do is change the Javascript. It was too good to be true!

Actually it was sort of too good to be true. Even though it worked on the example page, it didn’t work when I tried to plug it in. The syntax for jQuery has evidently changed a fair amount over time. So I had to do a little tweaking.

How To Get This To Work For You

Download jQuery – Current Release and put the file on your website.
Link to it on your webpage <script src="path/to/jquery.js" type="text/javascript" language="javascript"></script>
Replace the code in your old Suckerfish javascript file

From:

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

To:

$(document).ready(function(){
   $("#nav > li > ul").fadeOut("fast");
   $("#nav li").hover(
      function(){ $(this).find("ul:first").fadeIn("fast"); }, 
      function(){ $(this).find("ul:first").fadeOut("fast"); } 
   );
   if (document.all) {
      $("#nav li").hoverClass ("sfHover");
   }
});
$.fn.hoverClass = function(c) {
   return this.each(function(){
      $(this).hover( 
         function() { $(this).addClass(c);  },
         function() { $(this).removeClass(c); }
      );
   });
};
/* Code found at: http://be.twixt.us/jquery/suckerFish.php
Date: unknown
Tweaked by: Ethan Kent - http://www.ethanmultimedia.com/
For jQuery version: 1.2.6
Date: June 19th, 2008
*/

Help Me Vet This Technique

Like I say, this solution worked for me. I’d love to know if it works for everyone else. So please give me any feedback you can.

Filed Under: browser compatibility, code sample, css, designer, dom, drop down menu, how to, html, ie7, javascript, jquery, suckerfish, web developer

Comment

Thanks! This helped me a lot!

— Ric · 2008-07-08 06:50 · #
Thank you so much for this code! You saved me hours and helped me fix a problem I had with 3 sites. THANKS!!!

— Tina Karlsson · 2008-08-14 00:07 · #
I found a fix for the sticky suckerfish problem here: http://htmlfixit.com/?p=1013.

The author suggests that changing the background position attribute of the hovered LI:

<pre>#nav li:hover {background-position: 0 0;}</pre>

Of course, this might mess things up if you’re relying on background images. Hopefully one of the two CSS workarounds can tackle this, as it bothers me that I’d need to add a 30KB JS file just to get IE to behave like a good browser.

Hope that helps someone!

— Mike Cronin · 2008-09-22 07:00 · #
Thank you very much for this code.
your code works on IE6,FF,safari,and google chrome.
so, I can go home.
thanx!

— chao · 2008-10-03 04:45 · #
Thanks so much this ended hours of struggle and frustration!

— Philip Miner · 2009-01-17 19:02 · #
Thanks for the work on this. Seems to be working.

— Kevin Potts · 2009-04-17 08:59 · #
Thank You! It not only un-sticks it from IE, it gives us the option of using fades if desired.

— Ron Y · 2010-06-24 13:48 · #
Works great with solid colors or background images.
However, transparent .png images don’t animate properly in IE. But that’s an IE issue. Turn off the animation, and it works fine.

— Ron Y · 2010-06-25 11:49 · #

« How To Select An Incrementing Column With MySQL « Previous Article

Next Article » Paypal Button »

Name		Remember
E-mail
Website
Message
	Textile Help

Digital Media, Web Design, and Web Development by Ethan Kent | ethanmultimedia.com