jquery豎直手風琴菜單列表展開收縮下拉菜單



122 485 162



特效描述:豎直手風琴 菜單列表 展開收縮 下拉菜單,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

加群請備注:從官網了解到

老夫子电子