Jquery 动画菜单淡入并下降到位置

我正在尝试创建我的第一个动画菜单

这是我试图实现的一个形象

箭头向您显示我希望在单击菜单按钮时，名称下拉并淡入。我还希望菜单在页面上均匀分布

我已经开始创作小提琴了，但我没有很快的进展

这是：

这是css

.button-container {
    width:100%;
}
.button {
    padding: 7px 30px;
    cursor: pointer;
    vertical-align: middle; 
    border: 2px solid;
    display: inline-block;
}
#navcontainer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    width:100%;
}
#navcontainer ul li { 
    display: inline; 
}

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #dbd5d1;
}

#navcontainer ul li a:hover {
    color: #fff;
    background-color: #b93037;
}

---

您可以使用带有

opacity

和

top

的CSS转换

菜单应该是

position:absolute

，这样它就不会移动内容，然后可以使用

top:100%

和

opacity:0

以及动画的

transition:opacity 1s，top 1s

隐藏。然后使用jQuery切换显示类

CSS:

JS:

#navcontainer {
    opacity: 0;
    position: absolute;
    top: -100%;
    transition: opacity 1s, top 1s;
}
#navcontainer.showing {
    opacity: 1;
    top: 100%;
}

$(".button").click(function() {
    $("#navcontainer").toggleClass("showing");
});