jQuery Wheel 环形菜单插件5种效果演示

最新推荐文章于 2021-07-21 17:00:45 发布

weixin_30526593

最新推荐文章于 2021-07-21 17:00:45 发布

阅读量104

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wang1593840378/p/6124051.html

版权

很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示

在线预览

下载地址

实例代码

 
    
         <div  
         class 
         = 
         "container" 
         > 
        
 
                     
         <!-- Top Navi --> 
        
 
                     
         <div  
         class 
         = 
         "header" 
         > 
        
 
                         
         <h1>jQuery Wheel 环形菜单插件 Demo 1: Default Settings</h1>   
        
 
                     
         </div> 
        
 
                     
         <div  
         class 
         = 
         "menu" 
         > 
        
 
                         
         <a  
         class 
         = 
         "active"  
         href= 
         "index.html" 
         >Demo 1</a> 
        
 
                         
         <a href= 
         "index2.html" 
         >Demo 2</a> 
        
 
                         
         <a href= 
         "index3.html" 
         >Demo 3</a> 
        
 
                         
         <a href= 
         "index4.html" 
         >Demo 4</a> 
        
 
                         
         <a href= 
         "index5.html" 
         >Demo 5</a> 
        
 
                     
         </div> 
        
 
                     
         <div  
         class 
         = 
         "main" 
         > 
        
 
                         
         <a href= 
         "#wheel"  
         class 
         = 
         "wheel-button" 
         > 
        
 
                             
         <i  
         class 
         = 
         "customicon-plus" 
         ></i> 
        
 
                         
         </a> 
        
 
                         
         <div  
         class 
         = 
         "pointer" 
         >Click me</div> 
        
 
                         
         <ul id= 
         "wheel" 
         > 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-home" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-music" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-video" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-heart" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-user" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-trash" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-envelope" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-camera" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-picture" 
         ></i></a></li> 
        
 
                             
         <li  
         class 
         = 
         "item" 
         ><a href= 
         "#home" 
         ><i  
         class 
         = 
         "customicon-eye-open" 
         ></i></a></li> 
        
 
                         
         </ul> 
        
 
                     
         </div> 
        
 
                 
         </div><!-- Container --> 
        
 
                 
         <script type= 
         "text/javascript" 
         > 
        
 
                     
         $( 
         ".wheel-button" 
         ).wheelmenu(); 
        
 
           
                
         </script> 
        

            
        

          转载：http://www.cnblogs.com/niuboren/p/6120540.html 
        
 
  