change delay of dropdown menu

  • Reventlov

    (@reventlov)


    5 years, 3 months ago

    Hi,

    Is it possible to change the delay of dropdown ?

    When I hover a menu item, dropdown appears and it’s quite long to disappear when i don’t hover anymmore.
    I’d like the menu disappear without delay.

    Thanks in advance.

    Regards.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Amit Singh

    (@apprimit)

    5 years, 3 months ago

    Hello,

    Kindly add it to the Customize > Custom CSS/JS > Custom JS field to do it. Edit the code as per your need to adjust the duration – 

    jQuery(document).ready(function($){
    $('ul#menu-main-menu li.dropdown').hover(function(event) {
        event.preventDefault();
            $(this).find('ul.sub-menu').stop(true, true).fadeIn(300);
        },
        function(event) {
            event.preventDefault();
            $(this).find('ul.sub-menu').stop(true, true).fadeOut(300);
        }
    );
})
    Thread Starter Reventlov

    (@reventlov)

    5 years, 3 months ago

    Hello,

    Thanks for your help.

    I tried with several different durations but I don’t see any change.

    There is the website : https://www.bonpourleclimat.org/

    I change an element name bacause it’s translated in my case :

    jQuery(document).ready(function($){
    $('ul#menu-menu-principal li.dropdown').hover(function(event) {
        event.preventDefault();
            $(this).find('ul.sub-menu').stop(true, true).fadeIn(10000);
        },
        function(event) {
            event.preventDefault();
            $(this).find('ul.sub-menu').stop(true, true).fadeOut(10000);
        }
    );
})

    Regards

    • This reply was modified 5 years, 3 months ago by Reventlov.
    munish28

    (@munish28)

    4 years, 11 months ago

    Hi Bro, i am new in wordpress, i was looking for the same thing hover delay , when trying to move the cursor there was menu drop down delay , by adding this Custom JS provided by you , this solve the delay issue , but created some other issue for me . please see image/link 1 (without custom js code , when click on shop by department its working fine. image 1 without js code

    and when added js code and trying to hover on the shop by department its opening all the sub menu items image 2/ link image 2 with js code
    please help .

    • This reply was modified 4 years, 11 months ago by munish28.
    munish28

    (@munish28)

    4 years, 11 months ago

    case 2 , How to change the width of my account dropdown menu , when i try to do that under customization> header> Menu> Dropdown styling >width , it will change the width of SHOP BY DEPARTMENT dropdown also . can’t i change the my account dropdown menu width seprately!
    link attached My account , dropdown width

    boutayeb

    (@boutayeb)

    4 years, 10 months ago

    Dear @reventlov, I’ve checked your website https://www.bonpourleclimat.org/ and there is no delay I applied the same script also the script provided by @apprimit but no luck.
    Have you done anything else?

    Thread Starter Reventlov

    (@reventlov)

    4 years, 9 months ago

    Hi @boutayeb,

    Sorry, I planned to reply and I lost my mind 🙂

    Actually, my problem is not solved.
    I applied the script too but I still have that delay before dropdown disappear (when I stop to hover the menu main item). Something like 1sec.

    boutayeb

    (@boutayeb)

    4 years, 9 months ago

    Thank you for your feedback. Since your website is containing mainly dropdown items, the delay when switching between them is nearly nonexistent but when you move from one dropdown item to a no dropdown item the delay is there.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘change delay of dropdown menu’ is closed to new replies.