1

The default menu in the TwentyEleven theme is quite nice, pure CSS, but unfortunately, way too responsive and quick. It would be so nice to have it respond the same exact way with which the admin bar menu responds, that is instant drop-downs, but with a bit of delay on mouse out to let the visitor come back to the menu should his cursor slide out of the menu.

What would be the most efficient way to implement the HoverIntent jQuery Plugin into the default TwentyEleven menu?

Thanks

Pat

2
  • I have read this reference information (and most probably everything on the Web I have googled with the keywords jquery, wordpress, twentyeleven and hoverintent. Unfortunately, for some reasons I can't pinpoint, my tentatives never gave any results. Conflicting problems? See my first answer below.
    – Baudesign
    Sep 19 '11 at 2:03
0

Here is the code I have in my functions.php file:

/**
 * Hoverintent Plugin for the menu
 * @since Theme 1.0
 */
function theme_hover_menu() {
   wp_register_script('hoverintent_script',
        get_template_directory_uri() . '/js/hoverintent.js',
       array('jquery'),
       'r6' );
   wp_enqueue_script('hoverintent_script');
}
add_action('wp_enqueue_scripts', 'theme_hover_menu');

This is step 1... Next? Comments? Solutions? I will edit this post once I will have found the answer.

Here is my inline script in the <head>:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $(".menu li").hoverIntent({ //lower or uppercase i?
            over: makeTall, 
            timeout: 900, 
            out: makeShort,
            interval: 600
        });
    });
</script>

...and by the way, I want to move this script under my js folder into its own file, then enqueue it to the bottom of my rendered page (or should I do it?) Thanks for all your suggestions.

2
  • 2
    hoverintent.js is already part of WordPress in the wp-includes/js folder, so you just have to enqueue it for the front end with wp_enqueue_script('hoverIntent);.
    – Wyck
    Sep 19 '11 at 3:02
  • You are not using required noConflict wrapper in your inline code.
    – Rarst
    Sep 20 '11 at 19:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.