jQuery翼游旅行网导航菜单特效代码

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

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

以下是 jQuery翼游旅行网导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery翼游旅行网导航菜单</title>
<link type="text/css" rel="stylesheet" href="css/you_public_head.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<br>
<div class="publicNav" id="publicNav" data="二级导航栏">
    <div class="publicNav_nav">
        <p><a href="#" class="currHover">首页</a></p>
        <p class="hot"><a href="#" class="currHover">机票</a></p>
        <p><a href="#" class="currHover">酒店</a></p>
        <p><a href="#" class="currHover">旅游度假</a></p>
        <p class="new"><a href="#" class="currHover">租车</a></p>
        <p><a href="#" class="currHover">餐馆</a></p>
        <p><a href="#" class="currHover">翼购商城</a></p>
        <div class="publicNavHover">
            <div class="publicNavHoverF"></div>
            <div class="publicNavHoverM"></div>
            <div class="publicNavHoverE"></div>
        </div>
    </div>
</div>

<script type="text/javascript">

//导航切换，根据域名判断当前显示
$(function(){
	function navTab(indexPath){
		if(window.location.href.indexOf(indexPath)>0){
			return true;
		}else{
			return false;
		}		
	} 
	var currNav;
	if(navTab('flight.118114.cn')){
			currNav=1;$(".currHover").eq(currNav).addClass("hover");
		}else if(navTab('hotel.118114.cn')){
			currNav=2;$(".currHover").eq(currNav).addClass("hover");
		}else if(navTab('you.118114.cn')){
			currNav=3;$(".currHover").eq(currNav).addClass("hover");
		}else if(navTab('food.118114.cn')){
			currNav=4;$(".currHover").eq(currNav).addClass("hover");
		}else{
			currNav=0;$(".currHover").eq(currNav).addClass("hover");
	}
	function navHover(curr){
		var $navHover=$(".currHover").eq(curr);
		$navHover.parent().css("border-color","transparent").siblings().children().removeClass("hover");
		$(".publicNavHover").stop(true,false).animate({"left":$navHover.parent().position().left,"width":$navHover.parent().width()+41},100,function(){$navHover.addClass("hover").parent().css("border-color","#e7e7e7")});
		$(".publicNavHoverM").css({"width":$navHover.parent().width()+33});
	}
	navHover(currNav);
	$(".publicNav_nav").children("p").hover(function(){
		var curr=$(this).index();
		navHover(curr);
		},function(){
		//	$(this).children().removeClass("hover").css("color","#404040");
	}).each(function(){
		if($(this).attr("class")=="new")
		{	var left=$(this).position().left;
			$(".publicNav_nav").append("<img src='images/bg_new.png' style='z-index:9999;position:absolute;top:0;left:"+left+"px' />")}
		else if($(this).attr("class")=="hot")
		{	var left=$(this).position().left;
			var width=$(this).children("a").width();
			$(".publicNav_nav").append("<img src='images/bg_hot.png' style='z-index:9999;position:absolute;top:-9px;left:"+(left+width+40)+"px' />")}
	});
	$(".publicNav_nav").hover(function(){},function(){navHover(currNav)});
});
//导航切换结束

//添加副导航
function addSubNav(obj){
	var html="<div class='publicNavSub'>";
	var len=obj.length
	for(i=0;i<len;i++){
		if(i!=len-1)
		html+="<a href='"+obj[i].alink+"'>"+obj[i].atitle+"</a>";
		else
		html+="<a href='"+obj[i].alink+"' class='noborder'>"+obj[i].atitle+"</a>";
	}
	html+="</div>";
	$("#publicNav").after(html);
}
</script>
</body>
</html>

CSS代码(you_public_head.css):

@charset "utf-8";/* CSS reset */
body{width:100%;height:100%;font-size:12px;line-height:150%;background:#fff;color:#000;font-family:Arial,simsun,Helvetica,sans-serif}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
img,fieldset{border:none}
abbr,acronym{border:0;font-variant:normal}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
a{text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer}
:focus{outline:0}
caption,th,td{text-align:left;font-weight:400}
blockquote:before,blockquote:after,q:before,q:after{content:""}
/*input style for webkit*/
input,button,select,textarea{outline:none}
textarea{resize:none}
input[type=text]{-webkit-appearance:textfield;-webkit-rtl-ordering:logical;-webkit-user-select:text}
/*html5 reset*/
section,article,aside,header,footer,nav,dialog,figure{display:block}
/* clearfix */
.clearfix:after{content:".";height:0;display:block;visibility:hidden;clear:both}
.clearfix{*zoom:1}
/*layout*/
.clear{clear:both}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.hidden{visibility:hidden}
.none{display:none}
.block{display:block}
.relative{position:relative}
.absolute{position:absolute}
.tr{text-align:right}
.tl{text-align:left}
.tc{text-align:center}
/*padding*/
.pt15{padding-top:15px}
.pr15{padding-right:15px}
.pl15{padding-left:15px}
.pb15{padding-bottom:15px}
.pt20{padding-top:20px}
.pr20{padding-right:20px}
.pl20{padding-left:20px}
.pb20{padding-bottom:20px}
.pt10{padding-top:10px}
.pr10{padding-right:10px}
.pl10{padding-left:10px}
.pb10{padding-bottom:10px}
.pt5{padding-top:5px}
.pr5{padding-right:5px}
.pl5{padding-left:5px}
.pb5{padding-bottom:5px}
.p0{padding:0}
.p5{padding:5px}
.p10{padding:10px}
/*margin*/
.mt15{margin-top:15px}
.mr15{margin-right:15px}
.ml15{margin-left:15px}
.mb15{margin-bottom:15px}
.mt20{margin-top:20px}
.mr20{margin-right:20px}
.ml20{margin-left:20px}
.mb20{margin-bottom:20px}
.mt10{margin-top:10px}
.mr10{margin-right:10px}
.ml10{margin-left:10px}
.mb10{margin-bottom:10px}
.mt5{margin-top:5px}
.mr5{margin-right:5px}
.ml5{margin-left:5px}
.mb5{margin-bottom:5px}
.m0{margin:0}
.m5{margin:5px}
.m10{margin:10px}
/*font color*/
.red{color:red}
.blue{color:blue}
.green{color:green}
/*border*/
.noborder{border:none}
/*主导航*/
.publicNav{width:978px;height:35px;border:1px solid #e2e2e2;border-bottom:3px solid #15a8eb;position:relative;margin:0 auto 10px;z-index:8;background:url(publicSprite.png) no-repeat}
.publicNav_nav{height:37px;_height:36px;width:980px;margin:-1px auto 0;position:relative}
.publicNav_nav p{float:left;display:inline;position:relative;text-align:center;height:36px;padding:0 20px;z-index:10}
.publicNav_nav p.noBackground{background:none}
.publicNav_nav p a{padding:2px 20px;font:bold 16px/36px Microsoft Yahei;color:#404040}
.publicNav_nav p a:hover{text-decoration:none}
.publicNav_nav p a.hover{text-decoration:none;color:#fff}
.publicNavHover{position:absolute;height:39px;top:-3px;overflow:hidden;z-index:9}
.publicNavHoverF{width:4px;height:39px;background:url(bg_puclicNavHover.png) no-repeat;position:absolute;left:0;top:0}
.publicNavHoverM{height:39px;background:#15a8eb;position:absolute;left:4px;top:0}
.publicNavHoverE{width:4px;height:39px;background:url(bg_puclicNavHover.png) right 0 no-repeat;position:absolute;right:0;top:0}
/*副导航*/
.publicNavSub{width:918px;background:#15a8eb;border:1px solid #15a8eb;margin:-11px auto 0;padding:3px 30px;margin-bottom:10px}
.publicNavSub a{font:14px/24px Microsoft Yahei;color:#fff;padding:0 24px}
.publicNavSub a span{padding:0 5px}
.publicNavSub a:hover{text-decoration:none}
.publicNavSub a:hover span,.publicNavSub a.hover span{background:#a1dcf7;color:#0072bc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.publicNavSub a.noborder{border:none}

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