Delay

Hi,
Is it possible to set a delay to megamenu disappearance when mouse hover out the parent option?
On menus with a lot of items if the mouse pointer pass through another option on the way down, the megamenu desapear, so, the user must to go straigth down to be able to select mega menu options.
I tryed to implement hoverintent() and others scripts like this with no success:

jQuery(document).ready(function() {
jQuery(".sf-menu").hoverIntent(menuin , menuout);
});

 
// expand the height of the container
 
function menuin(){
 
jQuery(".mfn-megamenu-7").animate({height: 'toggle'}, "1000"); 
}
 
// reset the height of the container
 
function menuout() {
 
jQuery(".mfn-megamenu-7").animate({height: 'toggle'}, "1000");
 
}

Comments

  • Hi,

    we are very sorry but we do not have any option that is able to handle what you ask for, nor any solution unfortunately.

    Thanks for understanding!
  • This will be a further upgrade?
    I have this code:

    jQuery(function($) { 
    $('#Top_bar .menu li').hover(function(){
        $('.submenu ul', this).show();
    }, function(){
        $('.submenu ul', this).delay(2000).fadeOut();
    });
    });
    Is not working because css has ben executed first.
    Maybe you can implement this on the next upgrade.

  • Hi. I found this on menu.js:

    var doMenu = function(){

    if( ( $(window).width() >= options.mobileInit ) || ( ! options.responsive ) ){
    // desktop --------------------------------

    $( '> li, ul:not(.mfn-megamenu) li', menu ).hover(function() {
    $(this).stop(true,true).addClass( options.hoverClass );
    $(this).children( 'ul' ).stop(true,true).fadeIn( 2000 );
    }, function(){
    $(this).stop(true,true).removeClass( options.hoverClass );
    $(this).children( 'ul' ).stop(true,true).fadeOut( 2000 );
    });

    It says //Desktop, so why is not working when I set the delay to 200?
  • Just to share this to anyone who having the same problem then I.
    I noticed that fade effects was not working. So looking for solutions, i noticed that the option .stop(true,true) was repeated to many times. I just remove it from the lines below:

    Line 65:$(this).children( 'ul' ).fadeIn(options.delay);
    Line 72:$(this).children( 'ul' ).fadeOut(options.delay);

    You can do the same fot mobile option on lines 89 and 94.
    I hope you guys fix these on next release.
    Thank You.
  • We will have a look into it.
    thanks
  • arymaynart man... you are a hero. Thanks!
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.