Question

我已经制作了这个下拉菜单，我想添加一些不错的幻灯片效果。因为我是编程新手，所以我无法让它工作，而且我用谷歌搜索了几个小时。我准备了一个jsfiddle [这里] [1] （因为这就是我应该做的，对吗？）。如果我得到一点帮助，我会非常感激。

谢谢！

[1]：http://jsfiddle.net/knickemackan/2r6FE/

Answer 1

我更新了JS Fiddle

您需要添加jquery文件，并在JS文件中添加一些代码，如下所示。

$("#navMainWrap li, #navMainWrap li a").hover(function () {
    $(this).find("ul").slideDown("slow");
}, function() {
    $(this).find("ul").slideUp("slow");
});

问候D.

Answer 2

要获得类似幻灯片效果的内容，您可以使用max-height属性：

#nav ul li:hover ul {
    max-height: 500px;
}
#nav ul ul {
    display:inline-block;
    max-height: 0;
    position: absolute;
    overflow:hidden;
    background-color: #FFFFFF;
    border: 5px solid #ddd;
    border-top: 0;
    margin-left: -5px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

这样，当你将菜单点悬停到原始大小或最大高度值时，子菜单会扩展。

您也可以使用left属性而不是max-height来创建水平幻灯片效果。

Answer 3

如果你做“display：block;”;元素的高度不会自动生成动画。

（http://jsfiddle.net/2r6FE/11/）像这样更新你的CSS：

#body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    background-color: #FFF;
}

#header_wrapper {
    width: 100%;
    height: 150px;
    margin: 0 auto;
    background-color: #FFF;
}

#logo_wrapper {
    height: 150px;
    margin-left: 10%;
    width: 500px;
    background-image: url(../img/logo.png);

}

#nav {
    background-color: #FFF;
    border: 1px solid #ccc;
}
#nav_wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    z-index: 998;
    position: relative;
}

#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    min-width: 200px;
z-index: 999;

}
#nav ul li {
    display: inline-block;
    z-index: 1000;
    position: relative;
}
#nav ul li:hover {
    background-color: #BFF2FF;
}
#nav ul li a, visited {
    color: #999;
    display: block;
    padding: 15px;
    text-decoration: none;

}
#nav ul li ul {
    max-height:0;
    -webkit-transition-property: max-height,opacity;
    -moz-transition-property: max-height,opacity;
    -ms-transition-property: max-height,opacity;
    -o-transition-property: max-height,opacity;
    transition-property: max-height,opacity;
    -webkit-transition-duration: 0.3s,0,3s;
    -moz-transition-duration: 0.3s,0,3s;
    -ms-transition-duration: 0.3s,0,3s;
    -o-transition-duration: 0.3s,0,3s;
    transition-duration: 0.3s,0,3s;
    -webkit-transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -ms-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    overflow:hidden;
}
#nav ul li:hover ul {
    max-height:600px;
}
#nav ul ul {
    display: block;
    position: absolute;
    background-color: #FFFFFF;
    border: 5px solid #ddd;
    border-top: 0;
    margin-left: -5px;

}


#nav ul ul li {
    display:block;
}
#nav ul ul li a:hover {
    color: #FFF;
}

#uploadcont {
    background-color: fff;
    height: 200px;
    width: 500px;

}
#contactcont {
    background-color: #ffffff;
    width: 500px;
}

.alleft {
    text-align: left;
}

#uploadcont_in {
    height: auto;
    margin: 25px;
    padding: 10px;
    border: 10px solid #FFF;
}
#contactcont_in {
    height: auto;
    margin: 25px;
    padding: 10px;
}

虽然我已经尝试了很长一段时间，但无法获得下拉菜单幻灯片效果

3 个答案: