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=utf-8" />
<title>jquery顶部固定导航下拉菜单</title>

<link href="img/topanv.v1.0.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.1.10.2.js"></script>
<script type="text/javascript" src="js/topanv.js"></script>

</head>

<body style="height:2000px">
<div id="topnavbar" style="display: block;">
	<div id="topnanv" style="width: 980px;">
		<div class="defu">
			<a href="#" target="_self">首页</a>
		</div>
		<div id="anvlfteb">
			<div selec="bbs" class="posbox"> <a href="#">新闻</a> <i></i></div>
			<div selec="news" class="posbox"><a href="#">信息</a> <i></i></div>
			<div selec="post" class="posbox"><a href="#">商家</a> <i></i></div>
			<div selec="youhui" class="posbox"><a href="#">社区</a> <i></i></div>
			<div selec="other" class="posbox"><a href="#">团购</a> <i></i></div>
			<div selec="store" class="posbox"><a href="#">房产</a> <i></i></div>
			<div id="seledbox" class="posiabox" style="display: none; left: 1px;"><div>
			</div></div>
		</div>
		<div id="loginbtm">
			<a style="color:#FFF" target="_blank" href="#">免费发布信息</a> 
		</div>
	</div>
</div>
</body>
</html>

JS代码(topanv.js):

$(function(){
	var $anvlfteb=$('#anvlfteb'),$posbox=$anvlfteb.find('div.posbox'),$seledbox=$("#seledbox"),anvjson={
	bbs:'<a href="#"><img src="img/ico7.gif">抚州快讯</a>'+'<a href="#"><img src="img/ico17.gif">国内新闻</a>'+'<a href="#"><img src="img/ico3.gif">军事快讯</a>',news:'<a href="#"><img src="img/ico7.gif">抚州快讯</a>'+'<a href="#"><img src="img/ico4.gif">抚州教育</a>'+'<a href="#"><img src="img/ico34.gif">江西快讯</a>'+'<a href="#"><img src="img/ico17.gif">国内新闻</a>'+'<a href="#"><img src="img/ico3.gif">军事快讯</a>',post:'<a href="#"><img src="img/ico7.gif">抚州快讯</a>'+'<a href="#"><img src="img/ico4.gif">抚州教育</a>'+'<a href="#"><img src="img/ico17.gif">国内新闻</a>'+'<a href="#"><img src="img/ico3.gif">军事快讯</a>',youhui:'<a href="#"><img src="img/ico7.gif">抚州快讯</a>'+'<a href="#"><img src="img/ico4.gif">抚州教育</a>'+'<a href="#"><img src="img/ico34.gif">江西快讯</a>'+'<a href="#"><img src="img/ico17.gif">国内新闻</a>'+'<a href="#"><img src="img/ico3.gif">军事快讯</a>',other:'<a href="#"><img src="img/ico7.gif">抚州快讯</a>'+'<a href="#"><img src="img/ico4.gif">抚州教育</a>'+'<a href="#"><img src="img/ico17.gif">国内新闻</a>'+'<a href="#"><img src="img/ico3.gif">军事快讯</a>',store:'<a href="#"><img src="img/ico7.gif">抚州快讯</a>'+'<a href="#"><img src="img/ico4.gif">抚州教育</a>'+'<a href="#"><img src="img/ico34.gif">江西快讯</a>'+'<a href="#"><img src="img/ico17.gif">国内新闻</a>'+'<a href="#"><img src="img/ico3.gif">军事快讯</a>'}
;
	$posbox.mouseover(function(){
	var i=$(this).index();
	$(this).addClass("anvh").siblings().removeClass("anvh");
	var selec=$(this).attr("selec");
	if($seledbox.is(":hidden")){
	$seledbox.show().css("left",64*i+1).html("<div>"+anvjson[selec]+"</div>")}
else{
	$seledbox.stop().animate({
	left:64*i+1}
,200,function(){
	$("#seledbox").html("<div>"+anvjson[selec]+"</div>")}
)}
}
);
	$anvlfteb.mouseleave(function(){
	$seledbox.hide();
	$posbox.removeClass("anvh");
}
)}
)

CSS代码(topanv.v1.0.css):

#topnavbar{width:100%;height:41px;_height:35px;background:url(topnbg.png) 0 -30px repeat-x;position:fixed;_position:absolute;top:0;left:0;z-index:999;display:none;_top:expression(this.scrollTop=document.documentElement.scrollTop);}
#topnanv{height:35px;line-height:35px;font-size:14px;margin:0 auto;}
#anvlfteb{float:left;height:35px;position:relative;padding:0 1px;}
.defu a,.posbox a{display:block;padding:0 18px;color:#FFF;text-decoration:none;}
.defu a:hover,.posbox a:hover{color:#FFF;text-decoration:none;}
.defu{background:#111;float:left;}
.posbox{position:relative;width:64px;float:left;}
.posbox a{padding:0 23px 0 13px;}
.posbox i{width:7px;height:4px;background:url(up.gif) 0 -70px no-repeat;position:absolute;top:15px;right:10px;overflow:hidden;}
#topnanv .anvh a{background:#111;}
#topnanv .anvh i{background-position:0 -75px;}
.posiabox{position:absolute;top:32px;left:1px;display:none;padding-top:10px;background:url(loadpic.gif) -999px no-repeat;}
#seledbox{width:114px;}
#seledbox div{background:#FFF;box-shadow:0 0 8px #999;border:1px solid #999;font-size:12px;padding:5px 0;overflow:hidden;}
#seledbox a{color:#444;text-decoration:none;width:100px;height:20px;overflow:hidden;display:block;line-height:20px;padding:6px 0 6px 12px;border-bottom:1px dotted #DDD;}
#seledbox a:hover{background:#EEE;}
#seledbox img{float:left;width:20px;height:20px;margin-right:8px;}
#loginbtm{float:right;padding:0 15px;color:#FFF;background:#900;position:relative;}

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