中英文对照滑动显现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" />
    <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&amp;DESIGN &nbsp;艾洛创意</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;}

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