CSS skills: 1） Navigate item's animation

时间：2023-03-10 05:08:09
CSS skills: 1） Navigate item's animation 
<style>

        .nav { border-right:1px solid #268eb7; }

        .nav li{overflow:hidden;height:55px;border-left:1px solid #268eb7;}

        .nav li.active a,.nav li.active small{top:-55px !important;}

        .nav li a{position:relative;display:block;padding:7px 0 0;height:55px;color:#fff;text-transform:uppercase;}

        .nav li a small{margin-top:-3px;color:#6aa3c2;}

        .nav li a.hover{background-color:#fff;color:#007aaa;}

        .nav li.hover small{color:#dadada;}

</style>

<div style="background-color: #0e90d2">

            <ul class="am-avg-lg-8 nav">

                <li class="box am-text-center">

                    <a href="">首页<small class="am-block">Home</small></a>

                    <a href="" class="hover">首页<small class="am-block">Home</small></a>

                </li>

                <li class="box am-text-center">

                    <a href="http://kgdn.kangbeijia.cn/ppls">品牌连锁<small class="am-block">BRAND CHAIN</small></a>

                    <a href="http://kgdn.kangbeijia.cn/ppls" class="hover">品牌连锁<small class="am-block">BRAND CHAIN</small></a>

                </li>

                <li class="box am-text-center">

                    <a href="http://kgdn.kangbeijia.cn/zjtd" style="top: 0px;">专家团队<small class="am-block">Experts</small></a>

                    <a href="http://kgdn.kangbeijia.cn/zjtd" class="hover" style="top: 0px;">专家团队<small class="am-block">Experts</small></a>

                </li>

                <li class="box am-text-center">

                    <a href="http://kgdn.kangbeijia.cn/hxjs" style="top: 0px;">核心技术<small class="am-block">Technology</small></a>

                    <a href="http://kgdn.kangbeijia.cn/hxjs" class="hover" style="top: 0px;">核心技术<small class="am-block">Technology</small></a>

                </li>

                <li class="box am-text-center">

                    <a href="javascript:void(0)" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a>

                    <a href="javascript:void(0)" class="hover" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a>

                </li>

                <li class="box am-text-center">

                    <a href="http://kgdn.kangbeijia.cn/myal">美牙案例<small class="am-block">DENTAL CASE</small></a>

                    <a href="http://kgdn.kangbeijia.cn/myal" class="hover">美牙案例<small class="am-block">DENTAL CASE</small></a>

                </li>

                <li class="box am-text-center">

                    <a href="http://kgdn.kangbeijia.cn/shzr">社会责任<small class="am-block">Sociol duty</small></a>

                    <a href="http://kgdn.kangbeijia.cn/shzr" class="hover">社会责任<small class="am-block">Sociol duty</small></a>

                </li>

                <li class="box am-text-center diff">

                    <a href="javascript:void(0)" onclick="swtClick()" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a>

                    <a href="javascript:void(0)" onclick="swtClick()" class="hover" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a>

                </li>

            </ul>

        </div>

<script>

//更改导航栏目动画代码

    $(function(){

            var index;

            var obj;

            $('.nav li').each(function(){

                obj=$(this);

                index=obj.index();

                if(index==4){

                    obj.find('a').attr('href','javascript:void(0)');

                }

                var cloneLi=obj.find('a').clone().addClass('hover');

                obj.append(cloneLi);

            });

            $('.nav li').hover(function(){

                $(this).children().stop().animate({top:'-55px'},250);

            },function(){

                var _this=$(this).children();

                _this.stop().animate({top:'0'},250);

            });

        });

</script>

相关文章