使用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.****.net/detail/yilanyoumeng3/8497225

秒客网

使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画

相关文章