溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關html5怎么設置菜單欄緩慢下拉效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
對forum-1開啟絕對定位(absolute)，讓里面的li從其父元素中脫離出去，不然會把之后的內容往右擠，并且設置overflow：hidden, 設置高度為0， 鼠標移入后再設置相應的高度即可：
.code .forum-1{
/* 開啟絕對定位 */
position: absolute;
overflow: hidden;
height: 0;
transition-duration: 0.5s;
}html 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/reset.css">
<title>菜單欄緩慢下拉</title>
</head>
<body>
<ul class="code">
<li><a href="#">博客</a></li>
<li class="forum"><a href="#">論壇</a>
<ul class="forum-1">
<li><a href="#">css</a></li>
<li class="vue"><a href="#">vue</a></li>
<li><a href="#">python</a></li>
</ul>
</li>
<li><a href="#">直播</a></li>
</ul>
</body>
</html>css 樣式代碼如下：
a{
display: block;
text-decoration: none;
color: #333;
}
.code{
width: 390px;
height: 50px;
line-height: 50px;
background-color:#bfa;
margin: 5px auto;
}
.code li{
float: left;
width: 130px;
height: 50px;
background-color: #bfa;
text-align: center;
margin: 0 auto;
font-size: 20px;
}
.code > li:last-child{
margin-right: 0;
}
.code > li:hover{
background-color: #f8f192;
}
.forum{
position: relative;
margin: auto 90px;
}
.code .forum-1{
/* 開啟絕對定位 */
position: absolute;
overflow: hidden;
height: 0;
transition-duration: 0.5s;
}
.forum:hover .forum-1{
/* 鼠標移入釋放高度 */
height: 150px;
}試了很多次發現，transition是不支持display屬性的，也就是說，不能用display：none隱藏菜單欄
首先創建css動畫：
@keyframes frames{
from{
height: 0px;
}
to{
height: 150px;
}
}然后設置display：none隱藏菜單樣式，把它綁定到forum-1選擇器中，用animation綁定動畫名字，設置持續時間
.forum-1{
position: absolute;
display: none;
overflow: hidden;
/* 綁定動畫名字并且設置持續時間 */
animation-name: frames;
animation-duration: 0.5s;
}當鼠標移入時，設置display屬性為block即可：
.forum:hover .forum-1{
display: block;
}需要注意的一點是，這樣寫的結果會出現一個問題：當鼠標移入不久后二級菜單欄會自動收回，為了避免這種問題，我們可以在forum-1選擇器內部添加一行代碼即可：
.forum-1{
animation-fill-mode: forwards;
}關于“html5怎么設置菜單欄緩慢下拉效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
