Question

我一直在努力为这个下拉菜单设置动画片段，花费数小时编辑我认为相关的所有内容，但它仍无效。我有几个链接页面，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表中。

任何帮助将不胜感激，感谢。

Answer 1

此演示向您展示仅包含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>

Answer 2

关闭菜单的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>

动画HTML下拉菜单

2 个答案: