how can we as a slight delay to the flyout menu time?

[kayakbabe]

The flyout menu is really touchy and my whole team has issues with it being too quick to disappear or allow moving between different items in the flyout menu.
Is there a way to add maybe a 25 ms delay before the flyout menu disappears if you mouse off it?

[Matt Zimmermann]

Hi Kelly,

In the scripts.js file, probably around line 230, there is the function for showing the navigation. There is currently a small delay in the setTimeout function, you should be able to increase that to a more comfortable level for your users. For the initial showing of the navigation, you would need to add a similar function to the mouseenter call at about line 226.

[kayakbabe]

Thanks Matt! I haven't told you that you rock today! You totally do!

[kayakbabe]

It appears to me that setTimeout is the only thing to change.

    $('.js-az-menu-trigger').on('click', function(e){
            e.preventDefault();
            $('.nav-group-2').toggle();
            if( !$('.nav-group-2').is(':visible') ){
                $('.nav-group-3, .nav-group-4').hide();
            }
        });

        $('.js-az-menu-trigger, #js-sticky-dropdown-button .button').on('mouseenter', function(){
            $('.nav-group-2').show();
        });

        var timer;
        $('.js-az-menu-trigger, #js-sticky-dropdown-button .button, .nav-group-2, .nav-group-3, .nav-group-4').on({
            mouseover: function(){
                clearTimeout(timer);
            },
            mouseout: function(e){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    $('.nav-group-2, .nav-group-3, .nav-group-4').hide();
                }, 500); // default: 250
            }
        });

        $('.nav-group-2 a').on('mouseenter', function() {
            $('.nav-group-3').css('min-height', $(this).parent().height());
        });

        $.getScript(theme_path + '/js/jquery.menu-aim.js', function(data, textStatus) {
            $('.nav-group-2').menuAim({
                 activate: function(row) {
                     var $item = $(row),
                         id = $item.data('navigationitem-id'),
                        $group = $('.nav-group-4[data-navigationitem-id="' + id + '"]');

                    $('.nav-group-4').hide();
                    if( $group.find('.nav-group-5').length ){
                        $group.show();
                        $('.nav-group-3').show();
                    }
                 },
                 deactivate: function(row) {
                     $('.nav-group-4').hide();
                     $('.nav-group-3').hide();
                 },
                 rowSelector: ".nav-item-2"
             });
        });