动画HTML下拉菜单

我一直在尝试为下拉菜单设置动画长达数年，花费几个小时来编辑我认为相关的所有内容，但它仍然无效。我有几个链接的页面，HTML5中的源代码，几个引导页面以及一个样式表。这里是源代码：动画HTML下拉菜单

<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表单中。

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

来源

2016-03-04 user3355590

本演示向您显示仅有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>

来源

2016-03-04 10:59:43 NiZa

这将工作，但我使用旧版本的jQuery，我使用1.12.0和移动到新版本打破整个网站。该按钮完全停止工作，如果我只是在旧版本中使用此代码，是否有一种方法在我正在使用的版本中执行此操作？ – user3355590

我更新了旧版jQuery的答案。正如你所看到的，它仍然有效。换句话说，这种技术与jQuery无关。所以你的问题应该在别的地方。 – NiZa

打开知名度关上的菜单或用jQuery CSS文件，那么你可以使用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>

来源

2016-03-04 11:04:43 goncalopinto

动画HTML下拉菜单

回答

相关问题