jquery竖直手风琴菜单收缩展示下拉菜单



131 522 175



特效描述:竖直手风琴 菜单收缩 展示下拉菜单,用jquery框架制作两种非常简单的jquery手风琴菜单特效,鼠标滑过手风琴与鼠标点击触发手风琴。jquery下载。

代码结构

1. 引入JS

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

2. HTML代码

	<div class="demo">
		<h2>点击触发事件</h2>
		<div id="firstpane" class="menu_list">
			<p class="menu_head current">jquery图片特效</p>
			<div class="menu_body">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery图片切换">jquery图片切换</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery幻灯片">jquery幻灯片</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a>
			</div>
			<p class="menu_head">jquery导航菜单</p>
			<div class="menu_body">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery动画菜单">jquery动画菜单</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery树形菜单">jquery树形菜单</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a>
			</div>
			<p class="menu_head">jquery选项卡特效</p>
			<div class="menu_body">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery选项卡切换">jquery选项卡切换</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery滑动选项卡">jquery滑动选项卡</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="jquery更多特效">jquery更多特效</a>		
			</div>
		</div><!--firstpane end-->
		<h2>滑过触发事件</h2>
		<div id="secondpane" class="menu_list">
			<p class="menu_head current">js图片特效</p>
			<div class="menu_body">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js图片切换">js图片切换</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js幻灯片">js幻灯片</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js图片放大镜">js图片放大镜</a>
			</div>
			<p class="menu_head">js导航菜单</p>
			<div class="menu_body">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js动画菜单">js动画菜单</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js树形菜单">js树形菜单</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js下拉菜单">js下拉菜单</a>
			</div>
			<p class="menu_head">js选项卡特效</p>
			<div class="menu_body">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js选项卡切换">js选项卡切换</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js滑动选项卡">js滑动选项卡</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" title="js更多特效">js更多特效</a>		
			</div>
		</div><!--secondpane end-->
	</div><!--demo end-->



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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