用jQuery跟css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

今天看到淘宝ued博客上左边的菜单导航动画效果不错，就用jQuery和css3做了一个简单的例子，主要是实现运用了jQuery 事件和css3 transition属性。

用一个元素来实现鼠标滑动到某个导航的背景效果，文字颜色也运用css3 transition 渐变的效果
当鼠标滑动其他导航的时候，加背景的元素的top值也会随着变化，定位到当前的导航上，同时文字字体颜色也会跟着改变；
主要实现的html代码如下：

<div class="menuBox">
        <div class="itemBg">  
        </div>
        <ul>
            <li >
                <a href="">首页</a>
            </li>
            <li>
                <a href="">关于我们</a>
            </li>
            <li class="select">
                <a href="">蓝枫专栏</a>
            </li>
            <li>
                <a href="">联系方式</a>
            </li>
            <li>
                <a href="">产品营销</a>
            </li>
        </ul>
    </div>

css样式：

 .menuBox{ position: relative; width: 220px; background: #fff; }
        .itemBg{ position: absolute; top: 0; left: 0; z-index: -1; height: 41px; background: #f8f8f8; border-left: 5px solid #ff6600; width: 185px;transition:none;}
        .menuBox li{ border-top: 1px solid #f8f8f8; float: left; margin-top: -1px;}
        .menuBox ul{ margin-left: 32px; float: left; width: 156px; overflow: hidden;}
        .menuBox a{ display: block; padding: 9px 0; height: 21px; line-height: 21px; float: left; width: 156px;color:#333;-moz-transition:color .2s;-o-transition:color .2s;-webkit-transition:color .2s;transition:color .2s; text-decoration: none;}
        .menuBox a:visited{color:#333}a:focus{outline:0}
        .menuBox a:active, .menuBox a:hover,.menuBox .select a{color:#ff5f3e;outline:0; text-decoration: none;}

js代码

 $(function(){
           var menuBox = $('div.menuBox'),
                   itemBg = $('div.itemBg',menuBox),
                   _li = $('li',menuBox),
                   _licur = $('li.select',menuBox);
           //根据默认页面的导航到top设置itemBg的top值
           itemBg.css('top',(_licur.offset().top-_licur.closest('div').offset().top));

           _li.on({
               mouseenter:function(){
                   var $this =$(this);
                   itemBg.css({
                       'top':($this.offset().top-$this.closest('div').offset().top),
                       'transition-property':'top',
                       'transition-duration': 0.2+'s'
                   });
               },
               mouseleave:function(){
                   var $this =$(this);
                   itemBg.css({
                       'top':(_licur.offset().top-$this.closest('div').offset().top),
                       'transition-property':'top',
                       'transition-duration': 0.2+'s'
                   });

               }
           })

       })

注：考虑到网站性能优化的问题，一般css能实现的样式效果尽量不用js去实现。

demo下载地址：http://download.csdn.net/detail/yilanyoumeng3/8497225

用jQuery跟css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果

相关推荐