這篇文章主要講解了“jQuery怎么實習(xí)菜單功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“jQuery怎么實習(xí)菜單功能”吧！

10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有武鄉(xiāng)免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一、垂直菜單的實現(xiàn) 

	
		
		
		
		
		
	
	
		

			
				菜單1
				

					
子菜單1
					
子菜單2
				
			
			
				菜單2
				

					
子菜單1
					
子菜單2
				
			
			
				菜單3
				

					
子菜單1
					
子菜單2
				
			
		
	

ul,li{
	list-style: none;
}

ul{
	padding: 0;
	margin: 0;
}

.main{
	background-color: #666666;
	background-repeat: repeat-x;
	width: 100px;
}

li{
	background-color: #eeeeee;
}

a{
	text-decoration: none;
	padding-left: 20px;
	display: block;
	width: 80px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.main a{
	color: white;
}

.main li a{
	color: black;
}

.main ul{
	display: none;
}

$(document).ready(function(){
	$(".main>a").click(function(){
		var ulNode = $(this).next("ul");
		ulNode.toggle("normal");
	});
});

二、水平菜單的實現(xiàn)

	
		
		
		
		
		
	
	
		

			
				菜單1
				

					
子菜單1
					
子菜單2
				
			
			
				菜單2
				

					
子菜單1
					
子菜單2
				
			
			
				菜單3
				

					
子菜單1
					
子菜單2
				
			
		
		
		
		
		
		
		

			
				菜單1
				

					
子菜單1
					
子菜單2
				
			
			
				菜單2
				

					
子菜單1
					
子菜單2
				
			
			
				菜單3
				

					
子菜單1
					
子菜單2
				
			
		
	

ul,li{
	list-style: none;
}

ul{
	padding: 0;
	margin: 0;
}

.main,.hmain{
	background-color: #666666;
	background-repeat: repeat-x;
	width: 100px;
}

li{
	background-color: #eeeeee;
}

a{
	text-decoration: none;
	padding-left: 20px;
	display: block;
	width: 80px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.main a,.hmain a{
	color: white;
}

.main li a,.hmain li a{
	color: black;
}

.main ul,.hmain ul{
	display: none;
}

.hmain{
	float: left;
	margin-right: 1px;
}

.main{
	margin-top: 1px;
}

$(document).ready(function(){
	$(".main>a").click(function(){
		var ulNode = $(this).next("ul");
		ulNode.toggle("normal");
	});
	
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
	},function(){
		$(this).children("ul").slideUp();
	});
});

感謝各位的閱讀，以上就是“jQuery怎么實習(xí)菜單功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對jQuery怎么實習(xí)菜單功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！