magento2: Increase the dropdown speed of nav-menu

Question

by default nav-menu drop-down is so slow so I want the increase the drop-down time of nav-menu..

Till now I tried editing the two files but no success.. files edited: js/navigation-menu.js, Magento_Theme/menu.js

Hope some one help me to achieve this.

Answer 1

In your theme, make this file:

Your/theme/Magento_Theme/templates/html/topmenu.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"delay":150, "responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
        <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>
    </ul>
</nav>

The key ingredient is the delay option in the menu initialization. The default value is 300 milliseconds so here I set it to 150.

Answer 2

Its not in your JS files, you have to check the Less files since its a CSS thing. For examples check _navigation.less on line 155 you will find

transition: left .3s ease-out;

but you can also make your own less that overwrites these values in your custom css part. Then add this and change the values in your own less files

@media only screen and (max-width: 767px)
    .nav-sections {
        -webkit-transition: left .3s;
        -moz-transition: left .3s;
        -ms-transition: left .3s;
        transition: left .3s;
    }   
    .nav-before-open .page-wrapper {
        -webkit-transition: left .3s;
        -moz-transition: left .3s;
        -ms-transition: left .3s;
        transition: left .3s;
    }
}