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 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?

share|improve this question
    
This is my question, but apparently I used a temporary login to create it so I can't comment (versus this "answer").... I used the suggestion by helgatheviking as a starting point and found a WP plugin (cleverly named "Superfish Menus") that added Superfish effects to my nav menu. However, I get the fade effect but NO delay. I even tried to manually adjust the code for a 10-second delay and it doesn't honor a delay at all. Does anyone know of a reason that the stock WP menu system in 3.5.1 would not allow this delay? –  WebDevKev Mar 4 '13 at 15:01
    
Please see help > merge user profiles if you want duplicate accounts merged. –  Rarst Mar 4 '13 at 16:03

2 Answers 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).

share|improve this answer
    
You may notice that browser support for this isn't quite there yet...would be nice, but not a cross-browser solution. Superfish, as recommended by Helga, would be a better solution. –  jfacemyer Feb 28 '13 at 3:52

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');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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