使用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文件,此例子中简单的设置样式:
jquery文件<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>
<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>
写的不好的地方,请多多指点