Javascript 如何让菜单从底部按钮向上滑动，而不是仅仅显示？HTML/CSS/JS

我尝试了很多不同的方法，但是每次菜单都是一样的。我尝试过的东西：高度0->20%，宽度0->100%，jQuery，JavaScript，滑动/向下，隐藏/显示，边距底部：-50%->0%，动画等等

$（文档）.ready（函数（）{
$（“#设置菜单btn”）。单击（函数（）{
美元（“#nav”）。向下滑动（500）；
}); 
//隐藏菜单
$（“#关闭菜单btn”）。单击（函数（）{
$（“#导航”）.slideUp（“慢”）；
}); 
});
.nav{
显示：无；
}
.菜单{
填充：0.10%10%；
背景图像：线性渐变（向左，$强调色，$深色原色）；
背景图像：-webkit线性渐变（向左，$强调色，$深色原色）；
边界半径：5px5px0；
列表样式类型：无；
宽度：100%；
最大宽度：$max width菜单；
最大高度：$max height菜单；
位置：固定；
底部：0；
z指数：10；
左：50%；
转化：translateX（-50%）；
}


菜单项

删除菜单及其工作的位置和转换样式


$（文档）.ready（函数（）{
$（“#设置菜单btn”）。单击（函数（）{
美元（“#nav”）。向下滑动（500）；
}); 
//隐藏菜单
$（“#关闭菜单btn”）。单击（函数（）{
$（“#导航”）.slideUp（“慢”）；
}); 
});
.nav{
显示：无；
}
.菜单{
填充：0.10%10%；
背景图像：线性渐变（向左，$强调色，$深色原色）；
背景图像：-webkit线性渐变（向左，$强调色，$深色原色）；
边界半径：5px5px0；
列表样式类型：无；
宽度：100%；
最大宽度：$max width菜单；
最大高度：$max height菜单；
/*位置：固定*/
底部：0；
z指数：10；
左：50%；
背景：#ff8a009e；
/*转化：translateX（-50%）*/
}


菜单项

关闭
我解决了您的问题，但让我先帮您解决这个问题

您几乎不应该将
脚本
标记放在HTML代码之前，而应该始终放在
主体
标记关闭之前的最底部

在极少数情况下，您必须在页面首先完全加载之前加载脚本。所以尽量避免这种情况

此外，没有理由对已定位为绝对/固定的元素使用
translate
属性。您已经可以使用
上、右、下、左移动它了

只需将
top
属性的值设为负值，然后创建一个新类，该类的
top
属性等于0

然后，在单击按钮时，每次单击按钮时，只需将该类切换为导航！：）

以下是我的解决方案，它将解决您的问题：

如果您运行该代码段，您可以看到javascript中有错误，请更正它$（“#nav）.slideUp-输入的小错误there@Sfili_81你是说“runtime.lastError:”？谢谢@raphael！它解决了“刚刚出现”的问题“问题，但它会将整个页面向下推，并将菜单置于页面顶部。我的菜单是底部：0，这就是我希望它向上滑动的地方。删除“翻译”会将菜单置于居中的左侧。谢谢你花时间在这上面！谢谢你这么好的解释！我移动了脚本标记，没有删除translate+left标记，因为我需要菜单保持居中（而margin+display不会这样做）。现在我有了一个新类，它可以从底部完美地向上滑动菜单（我使用底部而不是顶部）。我的问题还在于，show menu按钮与close menu按钮不同，但我在两个函数中使用了add/removeClass，而不是toggle。我的问题持续了好几天，感觉非常棒！再次感谢！太棒了！：）如果你还需要什么，请告诉我！