以下是 中英文对照滑动显现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导航代码，属于站长常用代码" />
<style type="text/css">
#lan { text-align: center; }
#lan a { color: rgb(192, 155, 107); }
</style>
<title>中英文对照滑动显现jquery导航代码</title>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="header">
<div class="logo"><a href="#" target="_blank">ILEOUCREATIVE&DESIGN 艾洛创意</a></div>
<div class="menu">
<ul>
<li class="news"><a href="#" target="_blank">NEWS<span>新聞</span></a>
<ul>
</ul>
</li>
<li class="design"><a href="#" target="_blank">DESIGN<span>設計</span></a>
<ul>
<li><a href="#" target="_blank">Brand<span>品牌視覺</span></a></li>
<li><a href="#" target="_blank">Arts<span>藝術表現</span></a> </li>
</ul>
</li>
<li class="products"><a href="#" target="_blank">PRODUCTS<span>創意產品</span></a>
<ul>
<li><a href="#" target="_blank">Original<span>原創產品</span></a></li>
<li><a href="#" target="_blank">D.N.A.<span>設計新界</span></a></li>
<li><a href="#" target="_blank">Shops<span>授權店鋪</span></a> </li>
</ul>
</li>
<li class="ue"><a href="#" target="_blank">NEW UE<span>新體驗</span></a>
<ul>
</ul>
</li>
<li class="about"><a href="#" target="_blank">ABOUT<span>關於</span></a>
<ul>
<li><a href="#" target="_blank">Contact<span>聯絡</span></a> </li>
<li><a href="#" target="_blank">Team<span>團隊</span></a></li>
<li><a href="#" target="_blank">Company<span>公司</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(nav.js):
$(document).ready(function (){
$('.menu li span').css('opacity','0');
$('.menu > ul > li').hover(function (){
$(this).find('ul').show();
$(this).find('span:first').stop(true).animate({
top:-14,opacity:100}
,100);
$(this).addClass('active');
}
,function (){
$(this).find('ul').hide();
$(this).find('span:first').stop(true).animate({
top:0,opacity:0}
,100);
$(this).removeClass('active');
}
);
$('.menu li li').hover(function (){
$(this).find('span').stop(true).animate({
top:16,opacity:100}
,100);
}
,function (){
$(this).find('span').stop(true).animate({
top:0,opacity:0}
,100);
}
);
}
);
CSS代码(style.css):
*{margin:0;padding:0;}
html,a,a:hover{}
body{font-family:"microsoft yahei",Verdana,"华文细黑","黑体";background:#000;color:#999;line-height:1.5;-webkit-text-size-adjust:none;}
li{list-style:none;}
img{border:none;}
a{color:#999;text-decoration:none;}
a:hover{color:#0099ff;}
#container{margin:0 auto;width:1000px;background:#000;}
#header{height:146px;position:relative;margin:0 auto;width:960px;}
#header .logo{background:url(../images/logo.jpg) no-repeat 0 0;height:84px;width:194px;overflow:hidden;line-height:90em;top:36px;left:54px;position:absolute;}
#header .logo a{height:84px;display:block;}
#header .menu{position:absolute;top:61px;left:298px;width:900px;}
#header .menu ul{}
#header .menu li{float:left;position:relative;padding:0 62px 0 0;font-size:20px;text-transform:uppercase;background:#000;}
#header .menu .active a{color:#9C0;}
#header .menu li span{display:block;position:absolute;top:0;left:0;font-size:12px;}
#header .menu li ul{display:none;width:600px;position:absolute;left:0;}
#header .menu .about ul{right:47px;left:auto;}
#header .menu li li{text-transform:none;font-size:12px;padding:0 15px 0 0;height:36px;line-height:18px;}
#header .menu .about li{float:right;}
#header .menu li li span{display:block;position:absolute;top:0;left:0;white-space:nowrap;}
#header .menu .active li a{color:#999;}
#header .menu .active li a:hover{color:#9C0;}
分享到QQ
分享到微博
微信扫一扫
