jQuery上下收缩滑动树形菜单代码



158 629 210



特效描述:上下收缩菜单 滑动树形菜单 树形菜单,jQuery 树型菜单,上下收缩滑动菜单,简单大气  带有弹动效果

代码结构

1. 引入JS

<script src="scripts/jquery1.8.3.min.js" type="text/javascript"></script>
<script src="scripts/easing.js"></script>

2. HTML代码

	<div class="treebox">
		<ul class="menu">
			<li class="level1">
				<a href="#none"><em class="ico ico1"></em>导航一<i class="down"></i></a>
				<ul class="level2">
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
				</ul>
			</li>
			<li class="level1">
				<a href="#none"><em class="ico ico2"></em>导航一<i></i></a>
				<ul class="level2">
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
				</ul>
			</li>
			<li class="level1">
				<a href="#none"><em class="ico ico3"></em>导航一<i></i></a>
				<ul class="level2">
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
				</ul>
			</li>
			<li class="level1">
				<a href="#none"><em class="ico ico4"></em>导航一<i></i></a>
				<ul class="level2">
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
				</ul>
			</li>
                        <li class="level1">
				<a href="#none"><em class="ico ico5"></em>导航一<i></i></a>
				<ul class="level2">
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
					<li><a href="javascript:;">导航选项</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- 引入 jQuery -->
<script>
//等待dom元素加载完毕.
	$(function(){
		$(".treebox .level1>a").click(function(){
			$(this).addClass('current')   //给当前元素添加"current"样式
			.find('i').addClass('down')   //小箭头向下样式
			.parent().next().slideDown('slow','easeOutQuad')  //下一个元素显示
			.parent().siblings().children('a').removeClass('current')//父元素的兄弟元素的子元素去除"current"样式
			.find('i').removeClass('down').parent().next().slideUp('slow','easeOutQuad');//隐藏
			 return false; //阻止默认时间
		});
	})
</script>



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


热门标签: 收缩导航菜单 二级导航菜单 文字收缩展开 下拉导航菜单 图片收缩展开 竖直导航菜单 图标导航菜单 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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