jquery-滑鼠經過導航條,顯示二級下拉選單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#666;
}
ul{
-webkit-padding-start: 0;
}
.ul{
text-align: center;
width:800px;
margin:0 auto;
background:#3fd5d7;
font-size:0;
}
.ul>li{
display:inline-block;
position: relative;
}
.ul>li>a{
text-decoration: none;
padding:15px 30px;
display:block;
color:#fff;
transition: all .5s;
font-size:14px;
}
.active{
background:#d13c1e;
}
.activea{
background:#d13c1e;
}
.xiala{
position: absolute;
width:100%;
background:#1e94d1;
display:none;
}
.xiala>li{
list-style: none;
}
.xiala>li>a{
display:block;
padding:8px 0;
text-decoration: none;
color:#fff;
font-size:14px;
}
</style>
</head>
<body>
<ul class="ul">
<li>
<a href="#" class="activea">首頁</a>
</li>
<li>
<a href="#">關於我們</a>
</li>
<li>
<a href="#">新聞中心</a>
<ul class="xiala">
<li>
<a href="#">專案一</a>
</li>
<li>
<a href="#">專案二</a>
</li>
<li>
<a href="#">專案三</a>
</li>
<li>
<a href="#">專案四</a>
</li>
<li>
<a href="#">專案五</a>
</li>
</ul>
</li>
<li>
<a href="#">最新動態</a>
<ul class="xiala">
<li>
<a href="#">動態一</a>
</li>
<li>
<a href="#">動態二</a>
</li>
<li>
<a href="#">動態三</a>
</li>
</ul>
</li>
<li>
<a href="#">案例展示</a>
</li>
<li>
<a href="#">聯絡我們</a>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.ul>li').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
})
$('.ul>li>a').click(function(){
$(this).parent().siblings().children().removeClass('activea');
$(this).addClass('activea');
})
$('.ul>li').hover(function(){
$(this).find('.xiala').fadeToggle(400);
})
$('.xiala>li>a').hover(function(){
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
</script>
</body>
</html>
相關文章
- 滑鼠經過顯示下拉選單
- bootstrap 選單導航選單nav li滑鼠移入hover下拉顯示boot
- css滑鼠懸浮二級下拉導航選單CSS
- jQuery 緩衝效果二級導航下拉選單jQuery
- css+jquery滑鼠滑過,顯示下拉選單效果CSSjQuery
- Bootstrap系列 -- 40. 導航條二級選單boot
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- js css滑鼠懸停顯示下拉選單JSCSS
- jquery多個滑鼠移上顯示下拉選單jQuery
- JavaScript二級導航選單JavaScript
- 點選標題下拉展開二級子標題導航選單
- 純CSS二級下拉導航選單實CSS
- jquery二級下拉導航選單詳解jQuery
- css導航欄滑鼠hover的時候就出現下拉選單CSS
- 二級下拉導航選單製作詳解
- 滑鼠滑過,展示下拉選單
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- jquery實現的點選二級下拉導航選單jQuery
- 滑鼠懸浮底部有橫條伸展的導航選單
- CSS導航欄及下拉選單CSS
- 滑鼠懸浮緩慢下拉導航選單
- 【前端積累】二級選單,滑鼠滑過的時候子選單顯示,當滑鼠離開的時候子選單隱藏...前端
- Html中滑鼠懸停顯示二級選單的兩種方法HTML
- JavaScript橫向二級導航選單效果JavaScript
- 網頁導航欄滑鼠移上去自動彈出下拉選單網頁
- CSS 二級下拉選單CSS
- CSS二級下拉選單CSS
- jQuery 二級下拉選單jQuery
- 純css製作導航下拉選單CSS
- 經典的導航二級式導航選單增強版,不看不知道!! (轉)
- 前端----HTML/JS 滑鼠停留和移開例項----滑鼠指示時顯示二級選單(共三級)前端HTMLJS
- 在頂部顯示下拉選單
- 經典的導航二級式導航選單完整程式及中文註釋,強力推薦 (轉)
- JavaScript下拉摺疊導航選單講解JavaScript
- JavaScript 三級導航選單JavaScript
- 滑鼠懸浮背景變色導航選單
- 實現單擊一級選單顯示或隱藏二級選單
- CSS三級下拉導航選單詳解CSS