您的位置：首页 > Web前端 > JQuery

利用CSS、JQuery和div实现动态多级菜单

2014-12-31 00:02 786 查看
1、与前面不同，使用的CSS是class;前面的静态菜单使用的CSS是id方式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的菜单</title>

<style>

 div {
	margin:5px; 
	padding: 5px; 
	float:right; 
	width:80%;
	background-color:#fff;
  }

 .menu_container {
	float:left;
    width:20%;
 	margin:0 auto;
 	text-align:left;
 }

 .level_one_menu {
	background-color:#ccc;
 }
 .level_two_menu {
	background-color:#cdd;
	display:none;
 }
 .level_three_menu {
	 background-color:#dcc;
	 display:none;
 }

</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script>

$(document).ready(function() { 

	$('.level_two_menu').bind("click",function(){
		$(".level_three_menu",this).toggle();
		return false;
	})

	$('.level_one_menu').bind("click",function(event){
		$(".level_two_menu",this).toggle();
		event.stopPropagation();
	})

	$('.level_three_menu').bind("click",function(event){
		alert($(this).text());
		event.stopPropagation();
	})

	$('.level_one_menu:eq(0) > .level_two_menu').show();
	$('.level_two_menu:eq(0) > .level_three_menu').show();

}); 
</script>
</head>
<body>

<div class="menu_container">
	<div class="level_one_menu">计算机分类
	    <div class="level_two_menu">编程语言
			<div class="level_three_menu">Java</div>
			<div class="level_three_menu">.net</div>
			<div class="level_three_menu">C/C++</div>
			<div class="level_three_menu">PHP</div>
			<div class="level_three_menu">Python</div>
			<div class="level_three_menu">Javascript</div>
			<div class="level_three_menu">Object-C</div>
			<div class="level_three_menu">Perl</div>
			<div class="level_three_menu">Shell</div>
		</div>
		<div class="level_two_menu">操作系统
			<div class="level_three_menu">Linux</div>
			<div class="level_three_menu">Windows</div>
			<div class="level_three_menu">Mac</div>
			<div class="level_three_menu">Unix</div>
		</div>
		<div class="level_two_menu">数据库
			<div class="level_three_menu">Mysql</div>
			<div class="level_three_menu">Oracle</div>
			<div class="level_three_menu">DB2</div>
			<div class="level_three_menu">PostgreSQL</div>
			<div class="level_three_menu">MS SQL Server</div>
			<div class="level_three_menu">Sybase</div>
		</div>
	</div>
	<div class="level_one_menu">出版社分类
		<div class="level_two_menu">Addison-Wesley</div>
		<div class="level_two_menu">Apress</div>
		<div class="level_two_menu">Dummies</div>
		<div class="level_two_menu">friendsofED</div>
		<div class="level_two_menu">JohnWiley</div>
		<div class="level_two_menu">Manning</div>
		<div class="level_two_menu">McGraw</div>
		<div class="level_two_menu">NewRiders</div>
		<div class="level_two_menu">NoStarch</div>
		<div class="level_two_menu">OReilly</div>
		<div class="level_two_menu">Packt</div>
		<div class="level_two_menu">Pearson</div>
		<div class="level_two_menu">Pragmatic</div>
		<div class="level_two_menu">Prentice</div>
		<div class="level_two_menu">Que</div>
		<div class="level_two_menu">Sams</div>
		<div class="level_two_menu">SitePoint</div>
		<div class="level_two_menu">SYBEX</div>
		<div class="level_two_menu">Syngress</div>
		<div class="level_two_menu">Wrox</div>
	</div>
	<div class="level_one_menu">出版日期分类
		<div class="level_two_menu">2015</div>
		<div class="level_two_menu">2014</div>
		<div class="level_two_menu">2013</div>
		<div class="level_two_menu">2012</div>
		<div class="level_two_menu">2011</div>
		<div class="level_two_menu">2010</div>
		<div class="level_two_menu">2009</div>
		<div class="level_two_menu">2008</div>
		<div class="level_two_menu">2007</div>
		<div class="level_two_menu">2006</div>
		<div class="level_two_menu">2005</div>
		<div class="level_two_menu">2004</div>
		<div class="level_two_menu">2003</div>
		<div class="level_two_menu">2002</div>
		<div class="level_two_menu">2001</div>
		<div class="level_two_menu">2000</div>
		<div class="level_two_menu">2000年之前</div>
	</div>
</div>
</body>
</html>


2、效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航