2

Currently when hovering over the topmenu the menu expands instantly, and other topics seem to not give insight that help my case. I want to either add delay or to expand the menu only on click. Any changes in menu.js seem to not even respond to changes on the website.

Here's the code of menu.js that should be relevant

define([
    "jquery",
    "matchMedia",
    "jquery/ui",
    "jquery/jquery.mobile.custom",
    "mage/translate"
], function ($, mediaCheck) {
    'use strict';

/**
 * Menu Widget - this widget is a wrapper for the jQuery UI Menu
 */
$.widget('mage.menu', $.ui.menu, {
    options: {
        responsive: false,
        expanded: false,
        delay: 300

    },
10
  • did you get the solution ? Oct 9, 2017 at 12:08
  • No, it still expands instantly Oct 9, 2017 at 12:22
  • could your share your site URL , I need to check ..it can be fixed via CSS Oct 9, 2017 at 12:24
  • safegear.com Oct 9, 2017 at 12:29
  • I can add delay and it will open smoothly... if this works for you , then I ll post the code Oct 9, 2017 at 12:43

1 Answer 1

3

Add Some CSS tweaks to open menu smoothly with some delay rather than instantly

To add custom CSS/LESS always better to use _extend.less

See detailed answer for using _extend.less https://magento.stackexchange.com/a/195712/54588

Now in your _extend.less paste below css code

.page-header.header-newskin .navigation li.level0.fullwidth .submenu {
    transform-origin: top;
    webkit-transform: scale(1,0);
   -ms-transform: scale(1,0);
   transform: scale(1,0);
   -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: all 600ms ease-in-out 0s;
   transition: all 600ms ease-in-out 0s;



}

.sw-megamenu.navigation li.level0.fullwidth:hover > .submenu {
   webkit-transform:scale(1,1);
   -ms-transform: scale(1,1);
   transform: scale(1,1);
}

Then run the commands mentioned here: https://magento.stackexchange.com/a/195712/54588

Hopefully this should work for you

2
  • 1
    Again, you hit it on the head! I will customize the css to fit my website, but thanks for giving me a solution! Oct 9, 2017 at 13:32
  • 1
    Cheers ! Always use extend less for custom css Oct 9, 2017 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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