????：一、實現(xiàn)功能1、在一級導(dǎo)航中，鼠標(biāo)移動過去，導(dǎo)航目標(biāo)背景色改變；當(dāng)移動到有下拉標(biāo)志的導(dǎo)航目標(biāo)時，隱藏的二級導(dǎo)航顯示2、在二級導(dǎo)航移動時，實現(xiàn)以上部分功能以及顯示隱藏的三級導(dǎo)航3、移動三級導(dǎo)航時，實現(xiàn)背景顏色改變二、功能代碼html頁面代碼<!DOCTYPE html> <html lang="en"> <head> <
一、實現(xiàn)功能
1、在一級導(dǎo)航中，鼠標(biāo)移動過去，導(dǎo)航目標(biāo)背景色改變；當(dāng)移動到有下拉標(biāo)志的導(dǎo)航目標(biāo)時，隱藏的二級導(dǎo)航顯示
2、在二級導(dǎo)航移動時，實現(xiàn)以上部分功能以及顯示隱藏的三級導(dǎo)航
3、移動三級導(dǎo)航時，實現(xiàn)背景顏色改變
二、功能代碼
html頁面代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級菜單功能的實現(xiàn)</title>
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="demo.css">
<script src="../../jquery-3.3.1.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="one left">
<li><a href="">視頻教程</a></li>
<li><a href="">社區(qū)問答</a></li>
<li id="id3"><a href="">特色課程</a><i class="glyphicon glyphicon-triangle-bottom" style="margin-left:5px;color: #ccc"></i>
<ul class="two">
<li>php開發(fā)<i class="glyphicon glyphicon-menu-right" style="margin-left:20px;"></i>
<ul class="three left">
<li>php圖文教程</li>
<li>php視頻教程</li>
<li>php手冊教程</li>
<li>php實戰(zhàn)教程</li>
</ul>
</li>
<li>前端開發(fā)</li>
<li>服務(wù)端開發(fā)</li>
<li>移動開發(fā)</li>
<li>數(shù)據(jù)庫</li>
</ul>
</li>
<li><a href="">手冊下載</a></li>
<li><a href="">工具下載</a></li>
<li><a href="">編程詞典</a></li>
</ul>
</div>
<!-- <div class="clear"></div> -->
<div class="col-md-3"></div>
</div>
<script>
$(function(){
//二級導(dǎo)航彈出效果
$('#id3').mouseover(function(){
$(this).children('i').attr('class','glyphicon glyphicon-triangle-top')
$(this).find('.two').slideDown(500)
})
$('#id3').mouseleave(function(){
$(this).find('.two').slideUp(500)
$(this).children('i').attr('class','glyphicon glyphicon-triangle-bottom')
})
//二級導(dǎo)航條移動效果
$('.two>li').mouseover(function(){
$(this).css('background','#f5f5f5')
$(this).children('.three').show(300)
})
$('.two>li').mouseleave(function(){
$(this).css('background','#fff')
$(this).children('.three').hide()
})
//三級導(dǎo)航條移動效果
$('.three>li').mouseover(function(){
$(this).css('background','#f5f5f5')
})
$('.three>li').mouseleave(function(){
$(this).css('background','#fff')
})
})
</script>
</body>
</html>css樣式代碼
*{margin: 0;padding: 0;}
body{
background: #F3F5F7;
font-size: 14px;
}
.clear{clear: both}
.left{
float: left;
}
.col-md-3{
height: 60px;
background: #ccc;
}
.col-md-6{
height: 60px;
line-height: 60px;
background:black;
}
li{
list-style: none;
width: 100px;
cursor: pointer;
}
.container-fluid a{
text-decoration: none;
color: #ccc;
}
.one>li{
float: left;
margin-left: 6px;
text-align: center;
}
.one>li:hover{
background: #363C41;
}
.one>li>a:hover{
color: #fff;
}
.two{
background: #fff;
display: none;
}
.two li:first-child{
position: relative;
}
.two>li{
text-align: left;
padding-left: 10px;
height: 50px;
}
.three{
position: absolute;
top: 0;
left: 100px;
display: none;
}
.three li{
height: 50px;
padding-left: 10px;
}
?? ???：韋小寶?? ??：2019-01-30 09:29:16
???? ??：寫的很不錯 下拉菜單在任何網(wǎng)站都可以看到 可見使用的是非常的頻繁 這種小功能 實現(xiàn)的方法還有多種 不僅僅可以通過jQuery來實現(xiàn)哦