jQuery Hoverintent plugin in TwentyEleven Menu

10 Views

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?

Read More

Thanks

Pat

Post Views: 10

Related posts

Leave a Reply

1 comment

  1. 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.