How can I add a delay to the collapsible menu in Twenty Eleven?

Question

The navigation menu closes immediately upon moving the mouse outside of the menu item's area. How can I introduce a delay that will keep it open a second or less to keep visitors from becoming frustrated when trying to navigate to submenu items?

Answer 1

Superfish is a script that will add a delay to the hover action. It is used in a lot of themes, for instance I know it is used in the Thematic Theme. Untested, but I think this is how you'd apply it (based on the docs).

function wp88740_enqueue(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('hoverintent', get_stylesheet_directory() . '/scripts/hoverIntent.js' );
  wp_enqueue_script('superfish', get_stylesheet_directory() . '/scripts/superfish.js' );
}
add_action('wp_enqueue_scripts','wp88740_enqueue');

function wp88740_initialize(){ ?>

// initialise Superfish
<script>

    jQuery(document).ready(function($){
        $("#access ul.menu").superfish();
    });

</script>
<?php }
add_action('wp_head','wp88740_initialize');

Answer 2

Well, I don't really know the 'standard' themes and their respective functions, so I might suggest something inapropriate. ;)

Anyway, you could use CSS transitions.

Suppose you want to 'slow down' the opacity change of a div, then you want something like this div.some-class {
transition: opacity 1s ease-out;
-moz-transition: opacity 1s ease-out;
-webkit-transition: opacity 1s ease-out;
-o-transition: opacity 1s ease-out;
}

Of course, you first have to find the certain property you want to manipulate, as well as the element and its 'state' (like :hover in your case).