JQuery выпадающего меню со специальной анимацией

Question

Я хочу построить выпадающее меню с JQuery как следующий веб-сайт сделал:
https://www.eataly.com/

В настоящее время я висел на ниспадающей анимации. Я понятия не имею, как они это делают и не могут понять, как в их коде.

Моя лучшая идея состояла в том, чтобы скользить каждый элемент li внутри ul главного пункта меню. Но это не похоже на веб-сайт.

Я загрузил проект здесь, на jsfiddle он не работает хорошо, как это делается на автономном сайте. https://github.com/tyurderi/jquery-menu

Я рад, если вы можете помочь мне создать эту анимацию для моего меню.

Answer 1

«Выпадающая анимация» в главном меню сайта, с которым вы связаны, достигается преобразованиями CSS, а не jQuery.

Посмотрите на битом код в файле media-queries.css, начиная с линии 480:

/* menu desktop hover effects */ 
.js-opened-effect .nav-primary > li > ul{ 
    display: block; 
    -webkit-transform: scaleY(0); 
    -moz-transform: scaleY(0); 
    -ms-transform: scaleY(0); 
    -o-transform: scaleY(0);  
    transform: scaleY(0); 
    -webkit-transform-origin: top; 
    -moz-transform-origin: top; 
    -ms-transform-origin: top; 
    -o-transform-origin: top; 
    transform-origin: top;  
    -webkit-transition: -webkit-transform 0.26s ease; 
    -moz-transition: -moz-transform 0.26s ease; 
    -ms-transition: -ms-transform 0.26s ease; 
    -o-transition: -o-transform 0.26s ease; 
    transition: transform 0.26s ease; 
} 

.js-opened-effect .nav-primary > li:hover > ul{ 
    -webkit-transform: scaleY(1); 
    -moz-transform: scaleY(1); 
    -ms-transform: scaleY(1); 
    -o-transform: scaleY(1);  
    transform: scaleY(1); 
} 
.js-opened-effect .nav-primary ul li > ul{ 
    display: block; 
    -webkit-transform: scaleX(0); 
    -moz-transform: scaleX(0); 
    -ms-transform: scaleX(0); 
    -o-transform: scaleX(0);  
    transform: scaleX(0); 
    -webkit-transform-origin: left; 
    -moz-transform-origin: left; 
    -ms-transform-origin: left; 
    -o-transform-origin: left; 
    transform-origin: left;  
    -webkit-transition: -webkit-transform 0.26s ease; 
    -moz-transition: -moz-transform 0.26s ease; 
    -ms-transition: -ms-transform 0.26s ease; 
    -o-transition: -o-transform 0.26s ease; 
    transition: transform 0.26s ease; 
} 

.js-opened-effect .nav-primary ul li.js-sub-opened:hover > ul, 
.js-opened-effect .nav-primary > li.js-main-opened ul li.js-sub-opened:hover > ul{ 
    -webkit-transform: scaleX(1); 
    -moz-transform: scaleX(1); 
    -ms-transform: scaleX(1); 
    -o-transform: scaleX(1);  
    transform: scaleX(1); 
} 

Вот где вы должны смотреть, если вы хотите, чтобы повторить функциональность. Вот minimal example on JSFiddle, чтобы доказать, что это тот бит, который вы ищете.