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

迷南。 2022-06-17 08:25 370阅读 0赞

<!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>
    
    <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>

附上用到的图片：![Center][]

原文地址：[http://www.html5tricks.com/jquery-dropdown-menu-icon.html][http_www.html5tricks.com_jquery-dropdown-menu-icon.html]

[Center]: /images/20220617/47a1e6a607ec471ba9c43a15a617edb3.png
[http_www.html5tricks.com_jquery-dropdown-menu-icon.html]: http://www.html5tricks.com/jquery-dropdown-menu-icon.html