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

动画导航菜单 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();
});

 

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