Ajax Loader
HTML 
<div id="menu">
1
<div id="menu">
2
  <input type="checkbox" id="open" />
3
  <label for="open"></label>
4
  <nav>
5
    <ul>
6
      <li><a href="#">Home</a></li>
7
      <li><a href="#">About</a></li>
8
      <li><a href="#">Portfolio</a></li>
9
      <li><a href="#">Archive</a></li>
10
      <li><a href="#">Labels</a></li>
11
      <li><a href="#">Family</a></li>
12
      <li><a href="#">Tools</a></li>
13
      <li><a href="#">Disclaimer</a></li>
14
      <li><a href="#">Contact</a></li>
15
    </ul>
16
  </nav>
17
</div>
 
CSS 
/**
1
/**
2
 * CSS3 Exploding Menu by Taufik Nurrohman
3
 * On: 16 June 2012
4
 * URL: https://plus.google.com/108949996304093815163/about
5
 */
6
 
7
body {
8
  background-color:#222;
9
}
10
 
11
#menu {
12
  margin:100px auto;
13
  width:300px;
14
}
15
#menu nav {
16
  height:300px;
17
  overflow:visible !important;
18
  position:relative;
19
}
20
 
21
#menu nav ul {
22
  margin:0 0;
23
  padding:0 0;
24
  list-style:none;
25
}
26
 
27
#menu nav li {
28
  margin:0 0;
29
  padding:0 0;
30
  float:left;
31
  display:inline;
32
  -webkit-box-shadow:-650px 500px 0 #BC0036,200px -100px 0 #6CBC00,300px 100px 0 #0A40EA, 700px -500px 0 #EAC60A;
33
  -moz-box-shadow:-650px 500px 0 #BC0036,200px -100px 0 #6CBC00,300px 100px 0 #0A40EA, 700px -500px 0 #EAC60A;
34
  box-shadow:-650px 500px 0 #BC0036,200px -100px 0 #6CBC00,300px 100px 0 #0A40EA, 700px -500px 0 #EAC60A;
35
}
36
 
37
#menu nav a {
38
  display:block;
39
  background-color:#D7460D;
40
  color:gold;
41
  text-decoration:none;
42
  width:100px;
43
  height:100px;
44
  font:bold 16px/100px 'Arial Narrow',Arial,Sans-Serif;
45
  text-transform:uppercase;
46
  text-align:center;
47
}
48
 
49
#menu nav {
50
  -webkit-transition:all 2s ease-out;
51
  -moz-transition:all 2s ease-out;
52
  -ms-transition:all 2s ease-out;
53
  -o-transition:all 2s ease-out;
54
  transition:all 2s ease-out;
55
}
56
 
57
#menu nav ul {
58
  -webkit-transform:scale(0.2);
59
  -moz-transform:scale(0.2);
60
  -ms-transform:scale(0.2);
61
  -o-transform:scale(0.2);
62
  transform:scale(0.2);
63
  -webkit-transition:all 10s ease-in-out;
64
  -moz-transition:all 10s ease-in-out;
65
  -ms-transition:all 10s ease-in-out;
66
  -o-transition:all 10s ease-in-out;
67
  transition:all 10s ease-in-out;
68
}
69
 
70
/* Set the default item transition */
71
#menu nav li {
72
  -webkit-transition:all 10s ease-in-out;
73
  -moz-transition:all 10s ease-in-out;
74
  -ms-transition:all 10s ease-in-out;
75
  -o-transition:all 10s ease-in-out;
76
  transition:all 10s ease-in-out;
77
  opacity:0.4;
78
}
79
 
80
#menu nav a {
81
  -webkit-transition:all 0.4s ease-out;
82
  -moz-transition:all 0.4s ease-out;
83
  -ms-transition:all 0.4s ease-out;
84
  -o-transition:all 0.4s ease-out;
85
  transition:all 0.4s ease-out;
86
}
87
 
88
/* Make some random position */
89
#menu nav li:nth-child(1) {
90
  -webkit-transform:rotate(-370deg) translate(400px,200px);
91
  -moz-transform:rotate(-370deg) translate(400px,200px);
92
  -ms-transform:rotate(-370deg) translate(400px,200px);
93
  -o-transform:rotate(-370deg) translate(400px,200px);
94
  transform:rotate(-370deg) translate(400px,200px);
95
}
96
 
97
#menu nav li:nth-child(2) {
98
  -webkit-transform:rotate(-70deg) translate(200px,200px);
99
  -moz-transform:rotate(-70deg) translate(200px,200px);
100
  -ms-transform:rotate(-70deg) translate(200px,200px);
101
  -o-transform:rotate(-70deg) translate(200px,200px);
102
  transform:rotate(-70deg) translate(200px,200px);
103
}
104
 
105
#menu nav li:nth-child(3) {
106
  -webkit-transform:rotate(-400deg) translate(100px,-200px);
107
  -moz-transform:rotate(-400deg) translate(100px,-200px);
108
  -ms-transform:rotate(-400deg) translate(100px,-200px);
109
  -o-transform:rotate(-400deg) translate(100px,-200px);
110
  transform:rotate(-400deg) translate(100px,-200px);
111
}
112
 
113
#menu nav li:nth-child(4) {
114
  -webkit-transform:rotate(-300deg) translate(400px,700px);
115
  -moz-transform:rotate(-300deg) translate(400px,700px);
116
  -ms-transform:rotate(-300deg) translate(400px,700px);
117
  -o-transform:rotate(-300deg) translate(400px,700px);
118
  transform:rotate(-300deg) translate(400px,700px);
119
}
120
 
121
#menu nav li:nth-child(5) {
122
  -webkit-transform:rotate(300deg) translate(-400px,100px);
123
  -moz-transform:rotate(300deg) translate(-400px,100px);
124
  -ms-transform:rotate(300deg) translate(-400px,100px);
125
  -o-transform:rotate(300deg) translate(-400px,100px);
126
  transform:rotate(300deg) translate(-400px,100px);
127
}
128
 
129
#menu nav li:nth-child(6) {
130
  -webkit-transform:rotate(700deg) translate(200px,-100px);
131
  -moz-transform:rotate(700deg) translate(200px,-100px);
132
  -ms-transform:rotate(700deg) translate(200px,-100px);
133
  -o-transform:rotate(700deg) translate(200px,-100px);
134
  transform:rotate(700deg) translate(200px,-100px);
135
}
136
 
137
#menu nav li:nth-child(7) {
138
  -webkit-transform:rotate(1400deg) translate(250px,70px);
139
  -moz-transform:rotate(1400deg) translate(250px,70px);
140
  -ms-transform:rotate(1400deg) translate(250px,70px);
141
  -o-transform:rotate(1400deg) translate(250px,70px);
142
  transform:rotate(1400deg) translate(250px,70px);
143
}
144
 
145
#menu nav li:nth-child(8) {
146
  -webkit-transform:rotate(700deg) translate(-150px,700px);
147
  -moz-transform:rotate(700deg) translate(-150px,700px);
148
  -ms-transform:rotate(700deg) translate(-150px,700px);
149
  -o-transform:rotate(700deg) translate(-150px,700px);
150
  transform:rotate(700deg) translate(-150px,700px);
151
}
152
 
153
#menu nav li:nth-child(9) {
154
  -webkit-transform:rotate(800deg) translate(210px,-850px);
155
  -moz-transform:rotate(800deg) translate(210px,-850px);
156
  -ms-transform:rotate(800deg) translate(210px,-850px);
157
  -o-transform:rotate(800deg) translate(210px,-850px);
158
  transform:rotate(800deg) translate(210px,-850px);
159
}
160
 
161
#menu nav li:nth-child(10) {
162
  -webkit-transform:rotate(-700deg) translate(140px,-300px);
163
  -moz-transform:rotate(-700deg) translate(140px,-300px);
164
  -ms-transform:rotate(-700deg) translate(140px,-300px);
165
  -o-transform:rotate(-700deg) translate(140px,-300px);
166
  transform:rotate(-700deg) translate(140px,-300px);
167
}
168
 
169
#menu nav li:nth-child(11) {
170
  -webkit-transform:rotate(-300deg) translate(1140px,300px);
171
  -moz-transform:rotate(-300deg) translate(1140px,300px);
172
  -ms-transform:rotate(-300deg) translate(1140px,300px);
173
  -o-transform:rotate(-300deg) translate(1140px,300px);
174
  transform:rotate(-300deg) translate(1140px,300px);
175
}
176
 
177
#menu nav li:nth-child(12) {
178
  -webkit-transform:rotate(400deg) translate(300px,440px);
179
  -moz-transform:rotate(400deg) translate(300px,440px);
180
  -ms-transform:rotate(400deg) translate(300px,440px);
181
  -o-transform:rotate(400deg) translate(300px,440px);
182
  transform:rotate(400deg) translate(300px,440px);
183
}
184
/* End random */
185
 
186
/* Hide the checkbox */
187
#open {
188
  display:none;
189
}
190
 
191
#open + label {
192
  background-color:#666269;
193
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
194
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
195
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
196
  background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
197
  background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.1));
198
  font:bold 12px Arial,Sans-Serif;
199
  color:white;
200
  padding:7px 0;
201
  display:block;
202
  cursor:pointer;
203
  text-align:center;
204
  text-shadow:0 1px 3px black;
205
  position:absolute;
206
  top:0;
207
  right:0;
208
  left:0;
209
  z-index:999;
210
}
211
 
212
#open + label:hover,
213
#open:checked + label {
214
  background-color:#C5040B;
215
}
216
 
217
#open + label:active {
218
  background-color:white;
219
  color:black;
220
  text-shadow:none;
221
}
222
 
223
/* Make a toggle text with CSS Pseudo Element */
224
#open + label:before {
225
  content:"Bring Together All the Pieces!";
226
}
227
 
228
#open:checked + label:before {
229
  content:"Explode the Menu"
230
}
231
 
232
#open:checked ~ nav ul {
233
  -webkit-transform:scale(1) translate(0px,0px);
234
  -moz-transform:scale(1) translate(0px,0px);
235
  -ms-transform:scale(1) translate(0px,0px);
236
  -o-transform:scale(1) translate(0px,0px);
237
  transform:scale(1) translate(0px,0px);
238
}
239
 
240
#open:checked ~ nav li {
241
  opacity:1;
242
  -webkit-box-shadow:0 0 0 #BC0036,0 0 0 #6CBC00,0 0 0 #0A40EA, 0 0 0 #EAC60A;
243
  -moz-box-shadow:0 0 0 #BC0036,0 0 0 #6CBC00,0 0 0 #0A40EA, 0 0 0 #EAC60A;
244
  box-shadow:0 0 0 #BC0036,0 0 0 #6CBC00,0 0 0 #0A40EA, 0 0 0 #EAC60A;
245
  -webkit-transform:rotate(0deg) translate(0px,0px);
246
  -moz-transform:rotate(0deg) translate(0px,0px);
247
  -ms-transform:rotate(0deg) translate(0px,0px);
248
  -o-transform:rotate(0deg) translate(0px,0px);
249
  transform:rotate(0deg) translate(0px,0px);
250
}
251
 
252
#open:checked ~ nav a {
253
  width:98px; /* 98px + border = 100px */
254
  height:98px; /* 98px + border = 100px */
255
  background-color:white;
256
  background-image:-webkit-linear-gradient(top,#ccc,white);
257
  background-image:-moz-linear-gradient(top,#ccc,white);
258
  background-image:-ms-linear-gradient(top,#ccc,white);
259
  background-image:-o-linear-gradient(top,#ccc,white);
260
  background-image:linear-gradient(top,#ccc,white);
261
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
262
  border:1px solid transparent;
263
  border-color:rgba(255,255,255,0.2) rgba(0,0,0,0.2) rgba(0,0,0,0.2) rgba(255,255,255,0.2);
264
  color:#D7460D;
265
}
266
 
267
#open:checked ~ nav:hover a {
268
  -webkit-transform:scale(0.5) rotate(260deg);
269
  -moz-transform:scale(0.5) rotate(260deg);
270
  -ms-transform:scale(0.5) rotate(260deg);
271
  -o-transform:scale(0.5) rotate(260deg);
272
  transform:scale(0.5) rotate(260deg);
273
}
274
 
275
#open:checked ~ nav:hover a:hover {
276
  background-color:#D7460D;
277
  background-image:-webkit-linear-gradient(top,#D7460D,#AF390D);
278
  background-image:-moz-linear-gradient(top,#D7460D,#AF390D);
279
  background-image:-ms-linear-gradient(top,#D7460D,#AF390D);
280
  background-image:-o-linear-gradient(top,#D7460D,#AF390D);
281
  background-image:linear-gradient(top,#D7460D,#AF390D);
282
  color:gold;
283
  text-shadow:0 -1px 0 rgba(0,0,0,0.4);
284
  position:relative;
285
  z-index:77;
286
  -webkit-transform:scale(1.1) rotate(360deg);
287
  -moz-transform:scale(1.1) rotate(360deg);
288
  -ms-transform:scale(1.1) rotate(360deg);
289
  -o-transform:scale(1.1) rotate(360deg);
290
  transform:scale(1.1) rotate(360deg);
291
}
 

CSS3 Exploding Menu

CSSDeck G+