動畫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下拉菜單

回答

相關問題