jQuery下拉滑动红色导航滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery下拉滑动红色导航滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery下拉滑动红色导航</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){

	$("dl").hide();
	
	$("li.mainmenu").hover(function(){
		$(this).find("dl").stop(true,true);
		$(this).find("dl").slideDown();
	},function(){
		$(this).find("dl").stop(true,true);
		$(this).find("dl").slideUp();
	});
	
})
</script>

<style type="text/css">
*{margin:0px;padding:0px;list-style-type:none;}
#left{float:left;}
#right{float:right;}
/* nav */
.nav{width:1000px;height:46px;background:url(images/nav_bg.jpg) repeat-x;margin:40px auto;}
.nav li{float:left;width: 108px;height:46px;line-height:46px;text-align:center;font-size:14px;position:relative;}
.nav li a{color:#FFF;text-decoration:none;display:block;}
.nav li a.link{float:left;width: 108px;}
.nav ul li a:hover{background:url(images/nav_hover.jpg) no-repeat;display:block;}
.nav dl{width:108px;border:1px solid #C33;font-size:12px;background:#FCC;position:absolute;top:46px;left:0px;}
.nav dl dd a{color:#933;}
.nav dl dd a:hover{color:#000;background:#F36;opacity:0.5;}
</style>
</head>
<body>
<div class="nav">
	<div id="left"><img src="images/nav_l.jpg"></div>
	<ul>
		<li><a class="link" href="#">网站首页</a></li>
		<li class="mainmenu">
			<a class="link" href="#">电子商务</a>
			<dl>
				<dd><a href="#">零度对策</a></dd>
				<dd><a href="#">网站建设</a></dd>
				<dd><a href="#">网络营销</a></dd>
				<dd><a href="#">电子商务</a></dd>
				<dd><a href="#">广告代码</a></dd>
				<dd><a href="#">网页菜单</a></dd>
			</dl>
		</li>
		<li class="mainmenu">
			<a class="link" href="#">网络营销</a>
			<dl>
				<dd><a href="#">零度对策</a></dd>
				<dd><a href="#">网站建设</a></dd>
				<dd><a href="#">网络营销</a></dd>
				<dd><a href="#">电子商务</a></dd>
				<dd><a href="#">广告代码</a></dd>
				<dd><a href="#">网页菜单</a></dd>
			</dl>
		</li>
		<li class="mainmenu">
			<a class="link" href="#">客户服务</a>
			<dl>
				<dd><a href="#">零度对策</a></dd>
				<dd><a href="#">网站建设</a></dd>
				<dd><a href="#">网络营销</a></dd>
				<dd><a href="#">电子商务</a></dd>
				<dd><a href="#">广告代码</a></dd>
				<dd><a href="#">网页菜单</a></dd>
			</dl>    
		</li>
		<li class="mainmenu">
			<a class="link" href="#">工程案例</a>
			<dl>
				<dd><a href="#">零度对策</a></dd>
				<dd><a href="#">网站建设</a></dd>
				<dd><a href="#">网络营销</a></dd>
				<dd><a href="#">电子商务</a></dd>
				<dd><a href="#">广告代码</a></dd>
				<dd><a href="#">网页菜单</a></dd>
			</dl>  
		</li>
		<li class="mainmenu">
			<a class="link" href="#">行业资讯</a>
			<dl>
				<dd><a href="#">零度对策</a></dd>
				<dd><a href="#">网站建设</a></dd>
				<dd><a href="#">网络营销</a></dd>
				<dd><a href="#">电子商务</a></dd>
				<dd><a href="#">广告代码</a></dd>
				<dd><a href="#">网页菜单</a></dd>
			</dl>  
		</li>
		<li class="mainmenu"><a href="#">联系我们</a></li>
	</ul>
	<div id="right"><img src="images/nav_r.jpg"></div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)