动画导航菜单 css+js 动画导航

于 2014-09-11 13:13:17 发布 · 216 阅读

文章标签：

#javascript #ViewUI

本文介绍了如何使用CSS和JavaScript创建动画导航菜单，包括代码演示和实现步骤。

动画导航菜单 css+js 动画导航

演示

   XML/HTML Code
  

   <ul class="kwicks" style="width: 500px; height: 40px;">    
     <li id="kwick1" class="" style="left: 0px; margin: 0px; position: absolute; width: 125px; display: block;"><a href="#">Home</a></li>    
     <li id="kwick2" class="" style="left: 125px; margin: 0px; position: absolute; width: 125px; display: block; overflow: hidden;"><a href="#">Contact</a></li>    
     <li id="kwick3" class="" style="left: 250px; margin: 0px; position: absolute; width: 125px; overflow: hidden; display: block;"><a href="#">Downloads</a></li>    
     <li id="kwick4" class="" style="right: 0px; margin: 0px; position: absolute; width: 125px; display: block;"><a href="#">Search</a></li>    
 </ul>    

  

   JavaScript Code
  

    function my_kwicks(){  
    $('.kwicks').kwicks({  
        duration: 300,     
        max: 200,    
        spacing:  0    
    });  
}    
  
 $(document).ready(function(){                    
    my_kwicks();  
});  

  