zoukankan      html  css  js  c++  java
  • jQuery Wheel 环形菜单插件5种效果演示

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

     在线预览

    下载地址

    实例代码

     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <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
  • 相关阅读:
    复利计算- 结对
    《构建之法》第4章读后感
    复利计算--单元测试
    实验一 命令解释程序的编写实验
    Scrum 项目准备4.0
    Scrum 项目准备3.0
    scrum 项目准备2.0
    【操作系统】实验三 进程调度模拟程序
    scrum 项目准备1.0
    Scrum团队成立
  • 原文地址:https://www.cnblogs.com/wang1593840378/p/6124051.html
Copyright © 2011-2022 走看看