jquery右侧边固定层导航菜单依次动画滑动显示菜单展开



311 1241 414



特效描述:jquery 右侧边固定层 导航菜单 动画滑动 菜单展开,jquery右侧边固定层导航菜单,鼠标滑过浮动层导航菜单依次动画滑动显示菜单内容展开,鼠标离开后菜单收缩。

代码结构

1. 引入JS

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

2. HTML代码

<!-- 右侧导航 -->
<div class="rightNav">
	<a href="http://www.dijiuzhanzhang.com/"><em>0</em>站长素材</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>1</em>书签切换</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>2</em>幻灯片</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>3</em>图片滚动-左</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>4</em>图片滚动-上</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>5</em>图片无缝滚动-左</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>6</em>图片无缝滚动-上</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>7</em>文字滚动-左</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>8</em>文字滚动-上</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>9</em>文字无缝滚动-左</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>10</em>文字无缝滚动-上</a>
	<a href="http://www.dijiuzhanzhang.com/"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
var btb=$(".rightNav");
var tempS;
$(".rightNav").hover(function(){
	var thisObj = $(this);
	tempS = setTimeout(function(){
		thisObj.find("a").each(function(i){
			var tA=$(this);
			setTimeout(function(){
				tA.animate({right:"0"},300);
			},50*i);
		});
	},200);
},function(){
	if(tempS){
		clearTimeout(tempS);
	}
	$(this).find("a").each(function(i){
		var tA=$(this);
		setTimeout(function(){
			tA.animate({right:"-110"},300,function(){
			});
		},50*i);
	});
});
</script>
<div style="height:1000px;"></div>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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