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

Question

I've made this dropdown menu that I want to add some nice slide effects on. Since I'm new to programming I can't get it to work, and I've googled for hours. I've prepared A jsfiddle [Here][1] (cause that's what I should've done, right?) . I would appreciate it so much if I got a little help.

Thank you!

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

Answer 1

I have updated the JS Fiddle

You need to add jquery file, and add a little code to the JS file as shown below.

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

Regards D.

Answer 2

To get something like a slide effect, you could use the max-height property:

#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;
}

This way, the sub-menus will expand when you hover its menu-point until they reach their original size or the max-height-value.

You could also use the left property instead of max-height to create a horizontal slide-effect.

Answer 3

If you do "display:block;"; the height of the element won't animate automatically.

( http://jsfiddle.net/2r6FE/11/ ) Update your CSS like this:

#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;
}