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

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

 

演示

 

 

XML/HTML Code

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

 

JavaScript Code

1.  function my_kwicks(){  
2.     $('.kwicks').kwicks({  
3.         duration: 300,     
4.         max: 200,    
5.         spacing:  0    
6.     });  
7. }    
8.   
9.  $(document).ready(function(){                    
10.     my_kwicks();  
11. });  

 

原文地址:http://www.freejs.net/article_daohangcaidan_280.html