Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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?

    #2
    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.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


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

      Comment


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


        Code:
            $('.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"
                     });
                });

        Comment

        Working...
        X