Help on Sooperfish JQuery menu needed

[virtual]

Hi Guys,

I need some help with a Jquery menu that I am building.

http://em asai.com/multi colorJQMenu/dropmenu-lynda.php (remove 2 spaces) using the following plugin

http://www.so operthemes.com/open-source/jquery/jquery-sooperfish-dropdown-menus

 

I need the background of the top links (parent) to stay gray #444 all the time the drop down menu is extended. Is there any way I can do this? I'm stuck for the moment.

Thanks

Edited April 14, 2011 by virtual

[newseed]

That one looks a bit dated because the script is not supplying a sf-Hover to make the parent link to stay highlighted at a color you desire. Now maybe I don't quite understand what you mean by 'stay gray' since I was unable to view your site example but maybe this superfish will deliver what you are looking for.

[virtual]

Thanks Eddie, I have corrected my link.

 

The script is 2010 so younger than Superfish from which it is inspired. I could not see the sf-Hover in the Superfish link you gave me either. Both of them have this

hoverClass : 'sfHover',

but I'm not sure if that is what you meant.

[newseed]

Yes...that's what you need to style to the parent when you have a dropdown open.

[virtual]

Can you elaborate, I don't get it......

[falkencreative]

It looks like the Sooperfish menu doesn't add a hover class on the parent <li> by default (which the jquery plugin "Superfish" does) which is pretty much required to style the top level items on hover. Here is what I did to fix it:

 

added these lines just below "$('ul.sf-menu').sooperfish();" (this adds a class to the parent li when subitems are hovered over):

 

$(".sf-parent ul li a").hover(
	  function () {
	    $(this).parents(".sf-parent").addClass("sfHover");
	  },
	  function () {
	    $(this).parents(".sf-parent").removeClass("sfHover");
	  }
  );

and added one line to your CSS:

 

body ul#nav li.sfHover a { background:#444; }

[virtual]

OK thank you Ben, I will try that tomorrow - too late now.

I got the Eddie's Superfish menu link to do what I wanted but it doesn't have easing which is the cool factor with the Sooperfish.

[virtual]

Ben you're a genius!

 

Thank you so much it works like a charm.

[virtual]

Sorry to bother you again, but how do I get the drop down ul li's to stay #666 and #bbb on hover. At the moment they drop down as #666 but when hovered the whole ul changes to #444 with #bbb on hover.

[falkencreative]

I think adding

 

body ul#nav li.sfHover li a { background:#666; }

 

will fix that -- you'll have to test.

[virtual]

Wow, you are good!

 

I tried something similar but put the li a in front of the sfHover.