为HTML下拉菜单设置动画
为HTML下拉菜单设置动画
提问于 2016-03-04 18:42:44
我已经尝试这个下拉菜单动画很久了，花了几个小时编辑所有我认为相关的东西，但它仍然不起作用。我有几个链接的页面，在HTML5的源代码，以及几个引导页面以及一个样式表。源代码如下：
<div class = "navigation">
<button class = "btn btn-primary dropdown-toggle" type = "button" data-toggle = "dropdown" id = "navButton"> Navigation</button>
<ul class = "dropdown-menu" id = "dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Picture Gallery</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Latest News</a></li>
<li><a href="#">Local Services</a></li>
<li><a href="#">Housing Development</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>由于显而易见的原因，我不会复制每个引导程序文件的全部内容，但下面是我的下拉列表本身的StyleSheet：
#navButton{
background-color: #0783FF;
border: none;
color: #FFF;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Segoe UI";
width: 100%;
}
#navButton:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
content: 'a-chevron-down';
transition: 0.5s;
}
#dropdown ul li:after{
background-color: #0783FF;
border: none;
color: #FFF;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Segoe UI";
width: 100%;
}
#dropdown{
width: 100%;
font-size: 16px;
font-family: "Segoe UI";
text-align: center;
background-color: #0669CC;
color: #FFF !important;
}下拉菜单本身运行良好，当我点击它时，菜单会显示所有的buttons responding properly. The only issue is that I want it to 'slide' down，而不是仅仅出现。我已经看了几个不同的教程，但我仍然无法弄清楚问题是什么。我不确定动画代码是放在样式表中还是放在bootstrap.css表中。
任何帮助都会很感谢，谢谢。
回答 2
Stack Overflow用户
发布于 2016-03-04 18:59:44
本演示向您展示了一个仅包含css的动画示例。希望对你有用。
#navButton {
background-color: #0783FF;
border: none;
color: #FFF;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Segoe UI";
width: 100%;
position: relative;
z-index: 1;
}
#navButton:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
content: 'a-chevron-down';
transition: 0.5s;
}
#dropdown ul li:after {
background-color: #0783FF;
border: none;
color: #FFF;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: "Segoe UI";
width: 100%;
}
#dropdown {
width: 100%;
font-size: 16px;
font-family: "Segoe UI";
text-align: center;
background-color: #0669CC;
color: #FFF !important;
transform: translate3d(0px, -80px, 0px);
transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
opacity: 0;
visibility: hidden;
transform: translate3d(0px, -1000px, 0px);
display: block;
z-index: 0;
}
.navigation {
position: relative;
}
.navigation.open #dropdown {
opacity: 1;
filter: alpha(opacity=100);
visibility: visible;
transform: translate3d(0px, 0px, 0px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navigation">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="navButton"> Navigation</button>
<ul class="dropdown-menu" id="dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Picture Gallery</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Latest News</a></li>
<li><a href="#">Local Services</a></li>
<li><a href="#">Housing Development</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
Stack Overflow用户
发布于 2016-03-04 19:04:44
在CSS文件上关闭菜单的可见性，或者使用JQuery，然后你可以使用JQuery来检测悬停事件，打开菜单上的可见性并对其进行动画处理。
如下所示：
$("#dropdown").hide();
$("#myMenu").mouseover(function () {
$("#dropdown").slideDown('slow');
});
$("#myMenu").mouseleave(function () {
$("#dropdown").slideUp('slow');
});并将您的HTML更改为如下所示(用DIV包装菜单并为其指定ID，这是为了检测鼠标事件)：
<div id="myMenu">
<button class = "btn btn-primary dropdown-toggle" type = "button" data-toggle = "dropdown" id = "navButton"> Navigation</button>
<ul class = "dropdown-menu" id = "dropdown">
<li><a href="#">About Us</a></li>
<li><a href="#">Picture Gallery</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Latest News</a></li>
<li><a href="#">Local Services</a></li>
<li><a href="#">Housing Development</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35793967
复制相关文章
相似问题
腾讯云开发者
