jquery侧面导航列表代码



113 451 151



特效描述:jquery 侧面导航列表,jquery侧面导航列表代码

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

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

3. HTML代码

<div class="headeline"></div>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#1d1d1d;font:12px/180% "Lucida Grande", Verdana, sans-serif;}
.navbox{margin:30px auto;position:relative;width:340px;}
.navbox .mask{position:absolute;top:30px;left:-190px;}
.navbox h2{color:#ffff66;margin:0 0 0 13px;height:40px;font-size:14px;}
/* sliderNav */
#sliderNav{font-size:14px;margin:30px 0 0 0;}
#sliderNav li.sliderTag h3,#sliderNav li.sliderTag a{display:block;width:180px;padding:5px 18px;margin:0 0 5px 0;}
#sliderNav li.sliderTag h3{color:#000;background:#eee;font-weight:normal;font-size:14px;}
#sliderNav li.sliderTag a{color:#999;background:#4B4B4B;border:1px solid #1a1a1a;text-decoration:none;}
#sliderNav li.sliderTag a:hover{color:#ffff66;}
</style>
<script type="text/javascript">
$(document).ready(function(){
	slide("#sliderNav", 25, 15, 180, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier){
	// 创建目标路径
	var list_elements = navigation_id + " li.sliderTag";
	var link_elements = list_elements + " a";
	// 启动定时器用于滑动动画
	var timer = 0;
	// 创建幻灯片动画的所有列表元素
	$(list_elements).each(function(i){
		$(this).css("margin-left","-210px");
		// 更新计时器
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});
	// 创建的所有链接元素的悬停滑动效果	
	$(link_elements).each(function(i){
		$(this).hover(function(){
			$(this).animate({ paddingLeft: pad_out }, 180);
		},function(){
			$(this).animate({ paddingLeft: pad_in }, 180);
		});
	});
}
</script>
<div class="navbox">
	<img width="190" height="317" src="images/background.jpg" class="mask" />
	<h2>jquery左侧列表动态导航</h2>
	<ul id="sliderNav">
		<li class="sliderTag"><h3>jquery左侧列表动态导航</h3></li>
		<li class="sliderTag"><a href="http://www.jsfoot.com/">网站首页</a></li>
		<li class="sliderTag"><a href="http://http://www.51qianduan.com/">jquery 特效</a></li>
		<li class="sliderTag"><a href="http://http://www.51qianduan.com/">javascript特效</a></li>
		<li class="sliderTag"><a href="http://http://www.51qianduan.com/">flash动画下载</a></li>
		<li class="sliderTag"><a href="http://http://www.51qianduan.com/">站长素材</a></li>
		<li class="sliderTag"><a href="http://www.51qianduan.com/">站长之家</a></li>
	</ul>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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