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来证明这是你正在寻找的位。

带有特殊动画的jQuery下拉菜单

1 个答案: