带有特殊动画的jQuery下拉菜单[关闭]

Question

我想用 jQuery 构建一个下拉菜单，就像以下网站所做的那样：
https://www.eataly.com/

目前我挂在下拉动画上。我不知道他们是怎么做的，也不知道他们的代码是怎么做的。

我最好的想法是向下滑动主菜单项的 ul 中的每个 li 元素。但这在网站上看起来不像。

我在这里上传了项目，在 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，以证明这是您正在寻找的位。