jQuery二级下拉菜单下拉箭头翻转动画

来源：互联网发布：微信淘客用什么软件编辑：程序博客网时间：2024/05/17 23:33
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style type="text/css">/***在Position属性值为absolute的同时，*如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）*的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，*这对精确定位是很有帮助的。*/*{    margin: 0;    padding: 0;list-style-type:none;}/*nav导航盒子*/div.nav{    width: 800px;    height:36px;    line-height: 36px;    text-align: center;    font-size: 12px;    position: relative;    background: #643519;margin:40px auto 0 auto;}/*nav-main*/ul.nav-main{    width: 100%;    height: 100%;    list-style-type: none;}ul.nav-main span{    display: inline-block;    margin-left: 18px;    width: 7px;    height: 7px;    background: url('../img/down-icon.png') no-repeat;}/*图标向上旋转*/.hover-up{    transition-duration: .5s;    transform: rotate(180deg);    -webkit-transform: rotate(180deg);}/*图标向下旋转*/.hover-down{    transition-duration: .5s;    transform: rotate(0deg);    -webkit-transform: rotate(0deg);}/*导航条设置*/ul.nav-main>li{    width: 120px;    height: 100%;    display: block;    float: left;    background: #643519;    color: #fff;    margin-right: 1px;    cursor: pointer;}ul.nav-main>li:hover{    background: #643519;}/*隐藏盒子设置*/div.hidden-box{    width: 118px;    border: 1px solid #643519;    border-top: 0;    position: absolute;    display:none;background:#fff;    top: 36px;}.hidden-box>ul{    list-style-type: none;    color: #643519;    cursor: pointer;}.hidden-box li:hover{    background: #643519;    color: #fff;}/*隐藏盒子位置设置*/.hidden-loc-index{    left: 121px;}.hidden-loc-us{    left: 242px;}.hidden-loc-info{    left: 363px;}.box04{left:485px;}</style></head><body><!--nav--><div class="nav"><!--导航条--><ul class="nav-main">        <li>首页</li><li id="li-1">关于CFOAM<span></span></li><li id="li-2">信息中心<span></span></li><li id="li-3">消费者服务<span></span></li><li id="li-4">商务服务<span></span></li><li>研究中心</li></ul><!--隐藏盒子--><div id="box-1" class="hidden-box hidden-loc-index"><ul><li>目的意义</li><li>发展历程</li><li>组织架构</li>            <li>精英团队</li></ul></div><div id="box-2" class="hidden-box hidden-loc-us"><ul><li>加入联盟步骤</li><li>申请要求</li></ul></div><div id="box-3" class="hidden-box hidden-loc-info"><ul><li>消费者服务</li><li>产品信息</li><li>关于我们</li><li>商家信息</li><li>加入我们</li>            <li>关于我们</li><li>产品信息</li></ul></div>    <div id="box-4" class="hidden-box hidden-loc-info box04"><ul><li>服务理念</li><li>服务产品</li><li>周边有机网络</li><li>商铺汇总</li><li>有机百科</li>            <li>保障与维权</li></ul></div></div><script type="text/jscript">$(document).ready(function(){//    nav-li hover e    var num;    $('.nav-main>li[id]').hover(function(){       /*图标向上旋转*/        $(this).children().removeClass().addClass('hover-up');        /*下拉框出现*/        var Obj = $(this).attr('id');        num = Obj.substring(3, Obj.length);        $('#box-'+num).slideDown(300);    },function(){        /*图标向下旋转*/        $(this).children().removeClass().addClass('hover-down');        /*下拉框消失*/        $('#box-'+num).hide();    });//    hidden-box hover e    $('.hidden-box').hover(function(){        /*保持图标向上*/        $('#li-'+num).children().removeClass().addClass('hover-up');        $(this).show();    },function(){        $(this).slideUp(200);        $('#li-'+num).children().removeClass().addClass('hover-down');    });});</script></body></html>
附上用到的图片：
原文地址：http://www.html5tricks.com/jquery-dropdown-menu-icon.html
0 0
jQuery二级下拉菜单 下拉箭头翻转动画

jQuery二级下拉菜单下拉箭头翻转动画
