jQuery實現(xiàn)三級菜單的代碼

更新時間：2016年05月09日 09:38:41 作者：王丹婷

上周新接手一個網(wǎng)站建設的活兒，其中有需要要jquery代碼實現(xiàn)三級菜單的需求，其實說難也不難，下面小編把代碼分享給大家，供大家參考

上周新接手一個網(wǎng)站建設的活兒，其中有需要要jquery代碼實現(xiàn)三級菜單的需求，其實說難也不難，下面小編把代碼分享給大家，供大家參考。

先給大家展示下效果圖，如果大家感覺還不錯的話，請參考實現(xiàn)代碼。

HTML代碼：

<body> 
<div class="navMenu"> 
<ul> 
<li><a href="#">首頁</a> 
<ul> 
<li><a href="#">JavaScript+</a> 
<ul> 
<li><a href="#">三角函數(shù)</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">語文</a> 
<ul> 
<li><a href="#">唐詩</a></li> 
<li><a href="#">宋詞</a></li> 
</ul> 
</li> 
<li><a href="#">英語</a></li> 
</ul> 
</li> 
<li><a href="#">課程大廳</a></li> 
<li><a href="#">學習中心+</a> 
<ul> 
<li><a href="#">JavaScript+</a> 
<ul> 
<li><a href="#">三角函數(shù)</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">語文</a> 
<ul> 
<li><a href="#">三角函數(shù)</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">英語</a></li> 
</ul> 
</li> 
<li><a href="#">幫助</a></li> 
</ul> 
</div> 
</body>

js代碼：

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("li").has("ul").mouseover(function(){ 
$(this).children("ul").css("display","block"); 
$(this).css("backgroundColor","#0066FF"); 
}).mouseout(function () { 
$(this).children("ul").css("display","none"); 
$(this).css("backgroundColor","#eee"); 
}) 
}) 
</script>

css代碼：

*{ 
padding:0; 
margin:0; 
} 
/*一級菜單*/ 
.navMenu { 
width:570px; 
margin:0 auto; 
} 
.navMenu ul li{ 
float: left; 
position: relative; 
} 
li{ 
list-style: none; 
background-color: #eee; 
width: 140px; 
height: 40px; 
text-align: center; 
margin-right: 2px; 
margin-bottom: 2px; 
} 
ul li a{ 
line-height: 40px; 
text-align: center; 
font-size: 20px; 
color: #000; 
text-decoration: none; 
display: block; 
padding:0 10px; 
} 
/*二級菜單*/ 
.navMenu ul li ul { 
display: none; 
position:absolute; 
left: 0; 
top:0; 
margin-top:42px; 
} 
.navMenu ul li ul li{ 
float:none; 
} 
/*三級菜單*/ 
.navMenu ul li ul li ul{ 
display: none; 
left:140px; 
top:-42px; 
}

以上內(nèi)容是小編給大家介紹的jQuery實現(xiàn)三級菜單的代碼，希望對大家有所幫助！

您可能感興趣的文章: