一款漂亮的jquery动画导航效果,带二级下拉菜单

文章内容

分享一款漂亮的jquery动画导航效果,带二级下拉菜单 代码如下：

引入必要文件

<link href="css/index.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery/1.10.2/jquery.min.js"></script>

html代码

<div class="demo">
    <div class="container">
        <div id="nav">
            <ul>
                <li class="demo_li  active"><a href="#" class="demo_lia">网站首页<span>HOME</span></a></li>
                <li class="demo_li "><a href="#" class="demo_lia">关于我们<span>ABOUT</span></a>
                    <ul>
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">企业文化</a></li>
                    </ul>
                </li>
                <li class="demo_li "><a href="#" class="demo_lia">产品展示<span>PRODUCT</span></a>
                    <ul>
                        <li><a href="#">产品展示</a></li>
                    </ul>
                </li>
                <li class="demo_li "><a href="#" class="demo_lia">加盟合作<span>JOIN</span></a>
                    <ul>
                        <li><a href="#">加盟合作</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

jquery代码

<script>

     $(function () {
         $("#nav>ul>li").hover(function () {
             $(this).addClass("hover");
             $("#nav ul ul").slideUp("fast");
             $(this).find("a:first").animate({ "top": "21px" }, "fast");
             $(this).find("span").animate({ "top": "-39px" }, "fast");
             if (!$(this).find("ul").is(":animated")) $(this).find("ul").slideDown("fast")
         },
		function () {
		    $(this).removeClass("hover");
		    $(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")
		})
     });
         
 </script>

index.cs代码

*{margin:0; padding:0; list-style:none; font-family: "微软雅黑"; box-sizing:border-box; } 
a{ text-decoration:none; color:#333; transition: all 0.3s; -o-transition: all 0.3s; -mos-transition: all 0.3s; -webkit-transition: all 0.3s;  } 
.container{ width:1200px; margin: 0 auto;} 

/* 导航栏 */
.demo{width:100%; height:56px;  background: #000000; }
#nav{width:100%; height:56px; text-align:center; }
#nav ul{width:100%; }
#nav li{float:left; height:56px; box-sizing: border-box; padding-top:6px;  position:relative; z-index:99; width:138px; }
#nav a.demo_lia{width:100%; display:block; float:left;  color:#ffffff;outline:none;position:relative; font-size: 14px;}
#nav a.demo_lia span{font-size:12px;-webkit-text-size-adjust:none;line-height:12px; display:block; position:relative; color: #ffffff; margin-top:4px}
#nav li ul{width:100%; display:none; position:absolute; background:#717171; top:56px; left:0px; padding:10px 0; z-index:99}
#nav li ul li{width:100%; line-height:30px; height:30px; margin:0; position:relative; padding:0px; background:none; z-index:2}
#nav li ul a,#nav li.active ul a,#nav li.hover ul a{width:100%; height:30px; line-height:30px; color:#fff; font-size:14px; float:none;}
#nav li:last-child{background: none;}
#nav li.active,#nav li.demo_li:hover{background: #c10e82; }
#nav li.demo_li:hover{color:#fff}
#nav li.active span{top:-39px}
#nav li.active a{top:21px;}
#nav li.demo_li ul li:hover a{color:#ff0000}