动画 HTML 下拉菜单

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>

出于显而易见的原因，我不会复制整个引导文件，但这是我的下拉列表本身的样式表：

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