jQuery精美的折叠式菜单栏

学习笔记 马富天 2016-04-30 13:32:40 78 0

【摘要】花了一个上午的时间才搞出来的一个精美的折叠式导航栏,基于jQuery,有需要的可以取走。

效果图如下:

请输入图片名称

完整代码:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>jQuery折叠式菜单栏(手风琴)</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			.accordion{float:left;list-style:none;margin:0;padding:0;font-size:12px;background-color:#CECECE;line-height:30px;border-radius:4px;cursor:pointer;width:200px;}
  8. 			.accordion ul{list-style:none;margin:0;padding:0;}
  9. 			.accordion li{width:100%;display:block;float:left;}
  10. 			.accordion .first{}
  11. 			.accordion .last{}			
  12. 			.accordion .submenu{display:none;}
  13. 			.accordion .submenu li{}
  14. 			.accordion .submenu li a{text-decoration:none;width:auto;padding-left:30px;display:block;background-color:#444359;color:#FFF;border-bottom:1px solid #666;font-family:"Microsoft YaHei"}
  15. 			.accordion .submenu li a:hover{background-color:#B63B4D;border-bottom:1px solid #B63B4D;}
  16. 			.accordion .title{color:#666;font-family:"Microsoft YaHei";font-weight:800;float:left;line-height:36px;width:100%;}
  17. 			.accordion .title:hover{background-color:#DDD;}
  18. 			.accordion .active{color:#B63B4D;}
  19. 			.accordion i{width:20px;display:inline-block;height:20px;margin:0;}
  20. 			.accordion .l{float:left;margin:7px 4px 4px 5px;}
  21. 			.accordion .r{float:right;}
  22. 			.accordion .contact{background:url("/public/home/style/others/images/contact.png") no-repeat;}
  23. 	
  24. 		</style>
  25. 		<script type="text/javascript" src="/public/home/style/js/jquery-1.8.2.min.js"></script>
  26. 	</head>
  27. 	<body>
  28. 		
  29. 		<ul class="accordion">
  30. 			<li class="first">
  31. 				<div class="title"><i class="l contact"></i>会员管理<i class="r"></i></div>
  32. 				<ul class="submenu" status="0">
  33. 					<li><a href="#">注册会员</a></li>
  34. 					<li><a href="#">普通VIP</a></li>
  35. 					<li><a href="#">白金VIP</a></li>
  36. 					<li><a href="#">黄金VIP</a></li>					
  37. 				</ul>
  38. 			</li>
  39. 			<li>
  40. 				<div class="title"><i class="l contact"></i>商品管理<i class="r"></i></div>
  41. 				<ul class="submenu" status="0">
  42. 					<li><a href="#">男装</a></li>
  43. 					<li><a href="#">女装</a></li>
  44. 					<li><a href="#">儿童</a></li>
  45. 					<li><a href="#">青年</a></li>
  46. 				</ul>
  47. 			</li>
  48. 			<li class="last">
  49. 				<div class="title"><i class="l contact"></i>留言管理<i class="r"></i></div>
  50. 				<ul class="submenu" status="0">
  51. 					<li><a href="#">所有留言</a></li>
  52. 					<li><a href="#">回复留言</a></li>
  53. 				</ul>
  54. 			</li>						
  55. 		</ul>
  56. 		
  57. 		<script type="text/javascript">			
  58. 			$('.accordion .title').click(function(event) {	
  59. 				idx = $(this).index('.accordion .title');
  60. 				status = $('.accordion .submenu').eq(idx).attr('status');
  61. 				$('.accordion .submenu').slideUp('slow');
  62. 				$('.accordion .submenu').attr('status','0');
  63. 				$('.accordion .title').removeClass('active');
  64. 				if(status == 1){
  65. 					$('.accordion .submenu').attr('status','0');
  66. 					$('.accordion .submenu').slideUp('slow');
  67. 				}else{
  68. 					$(this).addClass('active');
  69. 					$('.accordion .submenu').eq(idx).attr('status','1');
  70. 					$('.accordion .submenu').eq(idx).slideDown('slow');					
  71. 				}				
  72. 			});
  73. 		</script>
  74. 	</body>
  75. </html>

需要自行下载jQuery,没有的话可以找我直接要Demo。

版权归 马富天PHP博客 所有

本文标题:《jQuery精美的折叠式菜单栏》

本文链接地址:http://www.mafutian.net/82.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 一个精美的CSS二级导航栏样式 》 下一篇《 ThinkPHP如何把目录长度缩为最少。 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多