jquery竖直手风琴菜单列表展开收缩下拉菜单



114 452 151



特效描述:竖直手风琴 菜单列表 展开收缩 下拉菜单,jquery竖直手风琴菜单列表,点击导航菜单展开或收缩的手风琴效果。默认下设置属性值让导航菜单列表项展开与子列表导航高亮显示的竖直手风琴菜单。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}			 
/* service-menu */			 
.service-menu .menu-title,.service-menu .menu-p,.service-menu .menu-p .menu-i{background:url("images/menubg.png") no-repeat;}
.service-menu{border:solid 1px #d1d1d1;width:232px;margin:40px auto 0 auto;}
.service-menu .menu-title{height:21px;overflow:hidden;padding:6px 8px;background-position:0 0;background-repeat:repeat-x;color:#444;font-size:14px;font-weight:bold;}
.service-menu .menu-p{display:block;height:21px;overflow:hidden;padding:6px 0 6px 19px;border-top:solid 1px #e6e6e6;background-position:0 -50px;background-repeat:repeat-x;color:#444;font-size:14px;font-weight:normal;cursor:pointer;}
.service-menu .menu-p .menu-i{float:left;display:inline;width:11px;height:11px;overflow:hidden;background-position:0 -103px;margin:5px 6px 0 0;}
.service-menu .menu-p a:link,.service-menu .menu-p a:visited{color:#444;text-decoration:none;font-size:14px;}
.service-menu .menu-p a:hover{color:#ff7300;text-decoration:none;}
.service-menu .menu-p-current .menu-i{background-position:-20px -103px;}
.service-menu .menu-p-current a:link,.service-menu .menu-p-current a:visited{color:#369;font-weight:bold;}
.service-menu .menu-p-current a:hover{color:#ff7300;}
.service-menu .menu-c{border-top:solid 1px #e6e6e6;display:none;padding:4px 0 4px 54px;}
.service-menu .menu-c-current{display:block;}
.service-menu .menu-c ul{display:block;}
.service-menu .menu-c li{padding:2px 0;height:18px;overflow:hidden;}
.service-menu .menu-c a:link,.service-menu .menu-c a:visited{color:#444;text-decoration:none;}
.service-menu .menu-c a:hover{color:#ff7300;text-decoration:none;}
.service-menu .menu-c .current:link,.service-menu .menu-c .current:visited{color:#369;font-weight:bold;}
.service-menu .menu-c .current:hover{color:#ff7300;}
</style>
<div class="service-menu">
	<input class="menu-code-index" type="hidden" value="c849" /><!--默认下值设置data-service-index=c203的列表项展开与子列表标签导航高亮显示-->
	<h2 class="menu-title"><a href="http://www.dijiuzhanzhang.com/">javascript特效</a></h2>
	<strong class="menu-p"><i class="menu-i"></i><a href="http://www.dijiuzhanzhang.com/">js图片特效</a></strong>
	<div class="menu-c">
		<ul>
			<li><a data-service-index="c849" href="http://www.dijiuzhanzhang.com/">js图片切换</a></li>
			<li><a data-service-index="c716" href="http://www.dijiuzhanzhang.com/">js幻灯片</a></li>
			<li><a data-service-index="c708" href="http://www.dijiuzhanzhang.com/">js图片滚动</a></li>
			<li><a data-service-index="c764" href="http://www.dijiuzhanzhang.com/">js广告</a></li>
		</ul>
	</div>
	<strong class="menu-p"><i class="menu-i"></i><a href="http://www.dijiuzhanzhang.com/">js导航菜单</a></strong>
	<div class="menu-c">
		<ul>
			<li><a data-service-index="c634" href="http://www.dijiuzhanzhang.com/">js动画菜单</a></li>
			<li><a data-service-index="c502" href="http://www.dijiuzhanzhang.com/">js树形菜单</a></li>
			<li><a data-service-index="c430" href="http://www.dijiuzhanzhang.com/">js下拉菜单</a></li>
		</ul>
	</div>
	<strong class="menu-p"><i class="menu-i"></i><a href="http://www.dijiuzhanzhang.com/">js表单特效</a></strong>
	<div class="menu-c">
		<ul>
			<li><a data-service-index="c488" href="http://www.dijiuzhanzhang.com/">js表单验证</a></li>
			<li><a data-service-index="c498" href="http://www.dijiuzhanzhang.com/">js表单美化</a></li>
			<li><a data-service-index="c616" href="http://www.dijiuzhanzhang.com/">js搜索提示</a></li>
			<li><a data-service-index="c500" href="http://www.dijiuzhanzhang.com/">js全选反选</a></li>
		</ul>
	</div>
</div>        			



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 收缩展开 展开收缩 收缩 展开 收缩菜单 收缩导航 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到