基于jquery实现百度新闻导航菜单滑动动画_jquery

本文实例为大家分享jquery实现百度新闻导航菜单滑动动画，供大家参考，具体内容如下

思路与步骤
1.利用UL创建简单横向导航；

    

      

网站首页
        

热点 
        

国际新闻 
        

国内新闻 
        

国家政策 
        

体育新闻 
        

娱乐新闻 
        

名人 
        

古迹 
      

  

2.添加一个脱离层的div,命名div-hover，用于菜单滑动动画，设置CSS样式；

   
   
   

     ...
   

3.添加菜单项的滑动事件，计算div-hover的滑动要素，左，上边距以及宽度；

效果预览

从预览效果可以看出，div-hover的定位是有问题的，div-hover应该以父级元素绝对定位，所以修改代码（注释部分为修改点）如下：

虽然解决了定位问题，但是背景图片还是浮于文字上方，所以调整代码，将文字浮动于红色div之上：

效果预览

4.添加菜单点击，以及加载页面默认菜单选中；

    

      
      
      

网站首页
        …………