以下是 上古世纪游戏官网jQuery导航栏代码 的示例演示效果:
部分效果截图:
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" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为上古世纪游戏官网jQuery导航栏代码，属于站长常用代码" />
<title>上古世纪游戏官网jQuery导航栏代码</title>
<link href="css/archenav.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/archenav.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="header">
<div class="topNav" id="topNav">
<div class="topNav2">
<div class="navBox">
<div class="navIndexBg">
<div class="navIL"></div>
<div class="navIL navIR"></div>
<div class="navIM"></div>
</div>
<div class="navMain" id="navMain">
<!-- 主导航放这里 -->
<div class="navIndex" id="navIndex">
<ul>
<li class=""><a href="#" title="官网首页" class="nav4">官网首页</a></li>
<li class=" "><a href="#" title="游戏资料">游戏资料</a></li>
<li class="nav1"><a href="#" title="视觉盛宴">视觉盛宴</a></li>
<li class=""><a href="#" title="游戏下载">游戏下载</a></li>
<li class=""><a href="#" title="新闻活动">新闻活动</a></li>
<li class=""><a href="#" title="玩家社区">玩家社区</a></li>
</ul>
</div>
<div class="navSub" id="navSub">
<dl class="nav2">
<dt>游戏资料</dt>
<dd><a href="#" title="">游戏介绍</a></dd>
<dd><a href="#" title="" target="_blank">游戏特色</a></dd>
<dd><a href="#" title="">系统介绍</a></dd>
<dd><a href="#" title="">新手指南</a></dd>
</dl>
<dl class="nav1">
<dt>视觉盛宴</dt>
<dd><a href="#" title="">游戏视频</a></dd>
<dd><a href="#" title="">游戏壁纸</a></dd>
<dd><a href="#" title="">游戏截图</a></dd>
<dd><a href="#" title="">游戏音乐</a></dd>
</dl>
<dl>
<dt>游戏下载</dt>
<dd><a href="#" title="">游戏下载</a></dd>
<dd><a href="#" title="">其他下载</a></dd>
</dl>
<dl>
<dt>新闻活动</dt>
<dd><a href="#" title="">新闻中心</a></dd>
<dd><a href="#" title="">活动专题</a></dd>
</dl>
<dl>
<dt>玩家社区</dt>
<dd><a href="#" title="" target="_blank" onclick="pgvSendClick({hottag:'nav.sub.navE1'});">积分中心</a></dd>
<dd><a href="#" title="" target="_blank" onclick="pgvSendClick({hottag:'nav.sub.navE2'});">官方互动</a></dd>
<dd><a href="#" target="_blank" title="" onclick="pgvSendClick({hottag:'nav.sub.navE3'});">官方论坛</a></dd>
</dl>
</div>
<!-- 二级放这里 end -->
</div>
</div>
</div>
</div>
<div class="logoBox">
<h1 id="logo" class="logoPNG">上古世纪官方网站</h1>
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(archenav.js):
$(function (){
var $navTop = $('#topNav'),$navMain = $navTop.find('#navMain'),$navSub = $navMain.find('#navSub'),$navIndex = $navMain.find('#navIndex'),de = 200;
$navIndex.mouseenter(function (){
$navSub.show().stop().animate({
'height':'187px'}
,de);
$navTop.stop().animate({
'height':'242px'}
,de);
}
);
$navMain.mouseleave(function (){
$navSub.stop().animate({
'height':'3px'}
,de,function (){
$navSub.hide();
}
);
$navTop.stop().animate({
'height':'75px'}
,de);
}
);
$navIndex.find('li:not(:eq(0))').mouseenter(function (){
var $this = $(this),i = $this.index() - 1;
$(this).addClass('nav3').siblings().removeClass('nav3');
$navSub.find('dt:eq(' + i + ')').show();
}
).mouseleave(function (){
var $this = $(this),i = $this.index() - 1;
$this.removeClass('nav3');
$navSub.find('dt:eq(' + i + ')').hide();
}
);
$navSub.find('dl').hover(function (){
var $this = $(this),i = $this.index() + 1;
$this.find('dt').show();
$navIndex.find('li:eq(' + i + ')').addClass('nav3');
}
,function (){
var $this = $(this),i = $this.index() + 1;
$this.find('dt').hide();
$navIndex.find('li:eq(' + i + ')').removeClass('nav3');
}
);
}
);
CSS代码(archenav.css):
body,ul,p{margin:0;padding:0;}
body{font:normal 12px 微软雅黑;}
ul,li,dt,dd,dl{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:0;}
h1{font-size:100%;font-weight:normal;padding:0;margin:0;}
a{text-decoration:none;color:#6c6c6c;}
a:hover{color:#ff4200;}
h1{text-indent:-5000px;display:block;height:0;font-size:0;line-height:0;overflow:hidden;}
body{min-width:1000px;padding-top:42px;background-color:rgb(187,187,187);color:#6c6c6c;}
.header{width:100%;max-width:1920px;margin:0 auto;position:relative;}
.navIL,.navIM,.logoPNG{background-image:url(../images/nav.png);}
.topNav{height:75px;width:100%;position:absolute;left:0;top:0;margin:0 auto;overflow:hidden;z-index:4;}
.topNav2{width:200%;position:absolute;left:-50%;top:0;}
.navBox{width:1920px;margin:0 auto;position:relative;}
.navIndexBg{width:1920px;position:absolute;height:75px;left:0;top:0;}
.navIL{width:840px;position:absolute;left:0;top:0;height:75px;background-repeat:repeat-x;background-position:0 -75px;}
.navIR{left:1080px;}
.navIM{left:840px;position:absolute;width:240px;height:75px;top:0;}
.navMain{width:1120px;margin:0 auto;height:242px;position:relative;}
.navIndex{padding-left:152px;height:55px;}
.navIndex li{color:#000;font-size:14px;float:left;line-height:50px;height:55px;width:112px;text-align:center;}
li.nav3,a.nav4:hover{background-position:-1120px -168px;}
.navIndex a{color:#000;display:block;width:112px;height:50px;}
.navIndex a:hover{color:#ff3b00;}
.nav1{margin-right:142px;}
.navSub{width:1120px;height:187px;display:none;overflow:hidden;}
.navSub a{color:#000;display:block;height:26px;margin:0 auto;width:108px;}
.navSub a:hover{color:#ff3b00;background-position:-1232px 0;}
.navSub dl{width:112px;float:left;text-align:center;line-height:26px;position:relative;padding-top:23px;height:134px;}
.navSub dt{position:absolute;width:100%;height:100%;left:0;top:0;text-indent:-5000px;background-position:-1120px 0;display:none;}
.navSub dd{position:relative;}
.nav2{margin-left:264px;_margin-left:132px;}
.logo{width:100%;position:absolute;left:0;top:0;overflow:hidden;height:124px;}
.logoBox{width:112px;height:124px;margin:0 auto;position:relative;z-index:5;top:6px;left:2px;}
h1.logoPNG{width:112px;height:124px;background-position:0 -150px;display:block;text-indent:-5000px;position:relative;top:-8px;left:-1px;}
.header{height:500px;}
.logoBox{position:relative;z-index:3;}
.navSub dt,.navSub,li.nav3,a.nav4:hover,.navSub a:hover{background-image:url(../images/navSub.png);background-repeat:no-repeat;}
分享到QQ
分享到微博
微信扫一扫
