jquery导航菜单

使用jquery做出动画特效的菜单

jquery思路：

1、 点击多级菜单一级菜单时，二级菜单会在slideUp()与slideDown()之间进行切换，使用slideToggle();

2、点击二级菜单时，三级菜单会以动画的效果出现与隐藏,需要一个变量来保存当前的状态，当状态为true的时候，当前三级菜单动画显示，其他的三级菜单隐藏，并修改当前状态为false；当状态为false时候，设置三级菜单隐藏，并修改其状态为true。

截图如下：

点击菜单栏，出现子菜单淡入淡出效果，如以上截图。

代码如下：

HTML：

	<div id="box">
		<ul class="one_ul">
			<li class="one_li"><a href="#">多级菜单</a></li>
		</ul>
		<ul class="two_ul">
			<li class="two_li1"><a href="#">二级菜单</a>
				<ul class="thr_ul1 a">
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
				</ul>
			</li>
			<li class="two_li2"><a href="#">二级菜单</a>
				<ul class="thr_ul2 a">
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
				</ul>
			</li>
			<li class="two_li3"><a href="#">二级菜单</a>
				<ul class="thr_ul3 a">
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
				</ul>
			</li>
			<li class="two_li4"><a href="#">二级菜单</a>
				<ul class="thr_ul4 a">
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
					<li class="thr_li"><a href="#">三级菜单</a></li>
				</ul>
			</li>
		</ul>
	</div>






css文件，此例子中简单的设置样式：


	<style type="text/css">
		*
		{
			margin: 0px;
			padding: 0px;
		}

		body
		{
			background: #b1b1b1;
			font-size: 14px;
			color: #000;
		}
		ul,li{
			list-style: none;
		}
		a{
			text-decoration: none;
			color: #000;
		}
		li{
			border: 5px solid #000;
			border-radius: 10px;
			text-align: center;
		}
		#box{
			width: 500px;
			height:800px;
			margin:50px auto;
			position: relative;
		}
		.one_li{
			width: 200px;
			height: 30px;
			line-height: 30px;
			font-size: 34px;
		}
		.two_ul{
			display: none;
		}
		.two_ul li{
			width: 200px;
			height: auto;
			font-size: 28px;
		}
		.thr_ul1,.thr_ul2,.thr_ul3,.thr_ul4{
			position: absolute;
			opacity:0;
		}
		.thr_li{
			width: 200px;
			height: auto;
			font-size: 24px;
		}
	</style>
jquery文件


<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
	//设置数组，作为状态的标志，用来判断是否点击了二级菜单并显示了三级菜单
	var swi=[true,true,true,true];
	$(document).ready(function(){
		$('.one_ul').click(function(){
			$('.two_ul').slideToggle();
		});
		$('.two_li1').click(function(){way(1);});
		$('.two_li2').click(function(){way(2);});
		$('.two_li3').click(function(){way(3);});
		$('.two_li4').click(function(){way(4);});
	});

	function way(i){
		var str='.two_li'+i;//获取二级菜单项
		var thr_str='.thr_ul'+i;//获取三级菜单项
		var top_thr=43*i+'px';//三级菜单显示的位置top
		var rtop_thr=(-50)*i+'px';//三级菜单隐藏的位置top
		
		//判断swi如果为true，则显示点中二级菜单下的子菜单，并隐藏其他的三级菜单，改变显示中菜单的状态为false
		if(swi[i-1]){
			$(thr_str).animate({'opacity':1,'left':'220px','top':top_thr});
			$('ul .a').not(thr_str).animate({'opacity':0,'left':'-250px','top':rtop_thr});
			swi[i-1]=false;
		}else{
			//如果点中的二级菜单状态为false，则修改状态为true
			$(str).find(thr_str).animate({'opacity':0,'left':'-250px','top':rtop_thr});
			swi[i-1]=true;
		}
		
	}
</script>






写的不好的地方，请多多指点