WordPress wp_nav_menu and superfish

Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

Create a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

Hi esmi. I have created a child theme of twentyeleven. I also think I’ve sorted the problem. The ‘menu-class’ in the wp_nav_menu array should have been ‘menu_class’, with an underscore as opposed to a hyphen.

I think the only issue now is that it doesn’t matter if I change the speed or delay within the javascript, it still seems to be the same. I’ve even ratched the delay up to five seconds to see if there is a difference, and there isn’t.

If you’d like to have a look, this is the site I’m working on. Thanks.

Just a note for anyone else who has problems with Superfish/HoverIntent: from my testing on another platform, it seems these jQuery plugins need updating. They are quite old and seem to lose some functionality at jQuery 1.4.3. They work perfectly with 1.4.2 but not with later versions.

@manic Hedgepig: I am SO grateful for your post.
I’m still not getting anywhere with this after following https://kav.in/wordpress-superfish-dropdown-menu which specifies different paths. Also different is a minified version that is said to initialize sf. I’m going to scratch all of that and try your solution.

My question for you since I’m using a child theme of twentyeleven as well is:
did you change the ‘twentyeleven’ in the following to your theme name? <?php _e( 'Skip to primary content', 'twentyeleven' ); ?>

Were there any other changes you made (other than the hyphen to underscore)?

Thanks!

Should the javascript and style sheet(s) be included using wp_enqueue_scripts/wp_enqueue_styles? Can I just import the style sheet to my child theme’s stylesheet? (i.e. @import url("/scripts/sf/superfish.css");
Thanks again.

GOT IT!
(although it seems to conflict with meteor slides plugin)
For starters:
This is an important step that gets overlooked because it’s basic and where I was going wrong…In your wp admin panel under Appearance > Menus, create a menu called ‘Main menu’ and on the left-hand side of that page, notice the Theme Locations box – under ‘Primary Navigation’ type in ‘Main menu’ if it’s not there.
Then: in functions.php, add the following:`$styledir = get_bloginfo(‘stylesheet_directory’);
if (!is_admin()) {
wp_deregister_script(‘jquery’);

// Lets use the one from Google AJAX API instead.
wp_register_script( ‘jquery’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’, false, ‘1.4.2’);
wp_register_script( ‘superfish’, $styledir.’/js/superfish.js’, array(‘jquery’), ‘1.4.8’);
wp_register_script( ‘hoverIntent’, $styledir.’/js/hoverIntent.js’, array(‘jquery’,’superfish’), ‘1.4.8’);
wp_register_script(‘jqsf’, $styledir.’/js/jqsf.js’, array(‘jquery’,’superfish’,’hoverIntent’));

wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘superfish’);
wp_enqueue_script(‘hoverIntent’);
wp_enqueue_script(‘jqsf’);

}
}`
NOTE: I am using a child theme of Twentyeleven so my path needs to read “stylesheet_directory” instead of “template_url”. I chose an earlier version of jquery, bc I read that was the one superfish liked. I chose to include them using wp_enqueue_script/style because I’ve read it’s the preferred method and will reduce conflicts (even though I have a conflict already…)
ALSO NOTE: I used a js directory and a styles directory. Change your paths to wherever you are storing the .js and .css files.

jqsf.js is a file I created that initializes superfish. Here are the contents:

$(document).ready(function(){
		$("ul.sf-menu").superfish({
			pathClass: 'current',
			delay:???????1000,???//?one?second?delay?on?mouseout?
????????????animation:???{opacity:'show',height:'show'},??//?fade-in?and?slide-down?animation?
????????????speed:???????'fast',??//?faster?animation?speed?
		});
	});

So, just create jqsf.js, copu and paste and save to your js folder along with the other scripts.

In header.php, my menu looks like yours:

<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link">"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></div>
<div class="skip-link">"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'sf-menu sf-navbar' ) ); ?>
</nav><!-- #access -->
	</header><!-- #branding -->

Thanks for the posts here!

and <?php _e( 'Skip to primary content', 'twentyeleven' ); ?> is ‘twentyeleven’ for anyone else thick enough to wonder. Seems obvious to me now that wp is referencing functions defined in twentyeleven’s functions.php and when I substituted my theme name I got undefined function errors.

hi chrisvwic, thanks for your guides! I just don’t understand why you didn’t add an action hook to run the above codes you wrote in functions.php (which I think is residing in child theme), ie like calling action hook “wp_head” or “init”. I think you missed out something there! However, I did follow some of your works and I changed them. I used whatever your wrote in child theme’s functions.php but add/enqueue another js script for supersubs to suit my needs.

Then, I enclosed them with a function and hook to action “wp_head”. I included all these codes in parent theme’s functions.php. I had also created jqsf.js as what you did, but I included supersubs and it’s settings together. When I tested my navigation menu, I saw that my superfish animation was working as it should, but not for supersubs. I still figure out how to solve it!