很酷的菜單-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
|