今天给大家分享一款基jquery超炫的动画导航菜单。这款导航菜单，初始时页面中间一个按钮，单击按钮，菜单从左侧飞入页中。再次单击按钮，导航飞入左侧消息。动画效果很非常炫。一起看下效果图：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<ul><li><a href="http://www.w2bc.com">First</a></li><li><a href="http://www.w2bc.com">Second</a></li><li><a href="http://www.w2bc.com">Third</a></li><li><a href="http://www.w2bc.com">Fourth</a></li><li><a href="http://www.w2bc.com">Fifth</a></li></ul><button>Animate</button><script src='jquery.js'></script><script> $('button').on('click', function () {$('ul').toggleClass('animate');}); //@ sourceURL=pen.js</script> |
css代码：
|
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
body{text-align: center;}ul{width: 400px;padding: 0;margin: 0 auto;}ul.animate li{transform: translate(0);}ul.animate li:nth-of-type(1){transition-delay: 0.05s;}ul.animate li:nth-of-type(2){transition-delay: 0.1s;}ul.animate li:nth-of-type(3){transition-delay: 0.15s;}ul.animate li:nth-of-type(4){transition-delay: 0.2s;}ul.animate li:nth-of-type(5){transition-delay: 0.25s;}li{list-style: none;display: block;padding: 20px;margin: 12px 0;border-radius: 5px;font-family: Helvetica, sans-serif;color: #fff;background: #8DE48D;transform: translate(-500%);transition: transform 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.08);}li:nth-of-type(5){transition-delay: 0.15s;}li:nth-of-type(4){transition-delay: 0.3s;}li:nth-of-type(3){transition-delay: 0.45s;}li:nth-of-type(2){transition-delay: 0.6s;}li:nth-of-type(1){transition-delay: 0.75s;}button{padding: 12px 18px;border: none;border-radius: 3px;color: #fff;background: #7DBED8;}button:focus{outline: none;} |
