Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

closed as too localized by toscho Jul 14 '12 at 21:57

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

    
    
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

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

share|improve this answer
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.