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>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
<style>
*{padding:0;margin:0;list-style:none;border:0;}
body{background:#666;}
/*---导航---*/
#nav{height:35px;text-align:center;clear:both;margin:111px 0 0 0;background:#6C5046;font-family:'microsoft yahei';}
#nav ul{float:;width:832px;margin:0 auto;}
#nav li{float:left;height:40px;position:relative}
#nav li.line_off{background:none}
#nav a{display:block;float:left;text-decoration:none;height:35px;padding-top:5px;line-height:18px;font-size:15px;color:#CFC4AC;width:90px;blr:expression(this.onFocus=this.blur());outline:none;position:relative;}
#nav a:hover,#nav .active a,#nav li.sfhover a{color:#fff;text-decoration:none;font-weight:700}
#nav a span{font-size:8px;-webkit-text-size-adjust:none;line-height:12px;padding-bottom:15px;display:block;font-weight:300;cursor:pointer;position:relative}
#nav .n{background:url(images/i2.png) no-repeat 0 4px;width:16px;height:51px;float:left}
/*---当前分类---*/
#nav li ul{display:none;position:absolute;top:35px;left:-20px;width:116px;padding:10px 0;background:url(images/nav2.png) repeat-y;z-index:11}
#nav li ul li{line-height:30px;height:30px;margin:0;background-image:none;position:relative;z-index:2}
#nav li ul a,#nav li.active ul a,#nav li.sfhover ul a{background:none;font-weight:300;height:auto;color:#000;line-height:24px;width:110px;margin-left:3px;font-size:12px;float:none;padding:0 0 6px;background:url(images/nav2.png) no-repeat -234px -100px;_background:url(images/nav2_1.gif) no-repeat 0 -30px}
#nav li ul a:hover{background:url(images/nav2.png) no-repeat -234px 0;_background:url(images/nav2_1.gif) no-repeat 0 0;color:#fff;font-weight:300}
#nav li ul .t{position:relative;z-index:2;top:14px;left:0;width:116px;height:4px;font-size:0;line-height:0;overflow:hidden;background:url(images/nav2.png) no-repeat -116px 0;_background:url(images/nav2_2.png) no-repeat}
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li class='active'><a href="#">首　页<span>HOME</span></a></li>
    <div class="n"></div>
    <li ><a href="#">作品展示<span>WORKS SHOW</span></a>
      <ul>
        <li><a href="#">高端摄影会馆</a></li>
        <li><a href="#">梦工场</a></li>
        <li><a href="#">梦幻海岸</a></li>
        <li><a href="#">东部华侨城</a></li>
        <li><a href="#">曼湾度假酒店</a></li>
        <li><a href="#">奥特莱斯</a></li>
        <li><a href="#">东湖外景基地</a></li>
        <li><a href="#">世界之窗外景基地</a></li>
        <li><a href="#">凯旋湾外景基地</a></li>
        <li class="t"></li>
      </ul>
    </li>
    <div class="n"></div>
    <li ><a href="#">客照欣赏<span>SWEET LOVE</span></a>
    <div class="n"></div>
    <li ><a href="#">最新动态<span>NEWS</span></a>
      <ul>
        <li><a href="#">最新优惠</a></li>
        <li><a href="#">越精彩</a></li>
        <li><a href="#">微幸福</a></li>
        <li><a href="#">微好评</a></li>
        <li><a href="#">新闻资讯</a></li>
        <li class="t"></li>
      </ul>
    </li>
    <div class="n"></div>
    <li ><a href="#">品牌历程<span>ABOUT US</span></a></li>
    <div class="n"></div>
    <li ><a href="##">服务项目<span>SERVICES</span></a>
      <ul>
        <li><a href="#">婚纱礼服</a></li>
        <li><a rel="nofollow"  target="_blank" href="http://wedding.tcdj.com/">婚庆策划</a></li>
        <li><a rel="nofollow"  target="_blank" href="http://body.tcdj.com">私密写真</a></li>
        <li><a rel="nofollow"  target="_blank" href="http://www.yoyobaby.com">儿童摄影</a></li>
        <li><a rel="nofollow"  target="_blank" href="http://www.huisixing.com">管理学院 </a></li>
        <li class="t"></li>
      </ul>
    </li>
    <div class="n"></div>
    <li ><a href="##">联系方式<span>CONTACT</span></a>
      <ul>
        <li><a rel="nofollow"  target="_blank" href="#">门店地址</a></li>
        <li><a href="#">总经理邮箱</a></li>
        <li class="t"></li>
      </ul>
    </li>
    <div class="n"></div>
    <li ><a target="_blank" href="#">天长地久论坛<span>SZFOREVER</span></a></li>
  </ul>
</div>
</body>
</html>

JS代码(nav.js):

$(function(){
	$("#nav>ul>li").hover(function(){
	$(this).addClass("sfhover");
	$("#nav ul ul").slideUp("fast");
	$(this).find("a:first").animate({
	"top":"12px"}
,"fast");
	$(this).find("span").animate({
	"top":"-30px"}
,"fast");
	if (!$(this).find("ul").is(":animated")) $(this).find("ul").slideDown("fast")}
,function(){
	$(this).removeClass("sfhover");
	$(this).find("a:first").animate({
	"top":"0px"}
,"fast");
	$(this).find("span").animate({
	"top":"0px"}
,"fast");
	if (!$(this).find("ul").is(":animated")) $(this).find("ul").slideUp("fast");
	$("#nav ul ul").slideUp("fast")}
)}
);

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