Jump to content

Help on Sooperfish JQuery menu needed


virtual

Recommended Posts

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 by virtual
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...