Ajax Loader
HTML 
<!-- A Google Font, not necessary, but looks good -->
1
<!-- A Google Font, not necessary, but looks good -->
2
<link href='http://fonts.googleapis.com/css?family=Gudea' rel='stylesheet' type='text/css'>
3
<!-- #content to center the menu -->
4
<div id="content">
5
    <!-- This is the actual menu -->
6
  <ul id="darkmenu">
7
          <li><a href="#">First Item</a></li>
8
          <li><a href="#">Second Item</a></li>
9
          <li><a href="#">Third Item</a></li>
10
     </ul>
11
</div>
12
 
 
CSS 
/* The body, gives an example how the background should look like */
1
/* The body, gives an example how the background should look like */
2
body {
3
    background: #063d4c;
4
    -webkit-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.8);
5
    -moz-box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.8);
6
    box-shadow: inset 0px 0px 150px 0px rgba(0, 0, 0, 0.8);
7
    width: 100%;
8
    height: 100%;
9
    position: absolute;
10
    margin: 0;
11
}
12
/* These create the flashes */
13
@-webkit-keyframes hover {
14
    0% { background: #bdedfa }
15
    100% { background: #063d4c }
16
}
17
@-moz-keyframes hover {
18
    0% { background: #bdedfa }
19
    100% { background: #063d4c }
20
}
21
@-ms-keyframes hover {
22
    0% { background: #bdedfa }
23
    100% { background: #063d4c }
24
}
25
@-o-keyframes hover {
26
    0% { background: #bdedfa }
27
    100% { background: #063d4c }
28
}
29
@keyframes hover {
30
    0% { background: #bdedfa }
31
    100% { background: #063d4c }
32
}
33
/* Again, #content is only there to center the menu */
34
#content {
35
  text-align: center;
36
  width: 100%;
37
  height: 100%;}
38
/* Here you go: This is what you need to get this menu */
39
ul#darkmenu {
40
    margin-top: 3%;               /* Well, you don't need this... */
41
    display: inline-block;          /* ... and this, this just centers the menu. */
42
    list-style: none;
43
    font-family: 'Gudea', sans-serif;    /* Change this to use another font */
44
    -webkit-transition: all 0.2s linear;
45
    -moz-transition: all 0.2s linear;
46
    -ms-transition: all 0.2s linear;
47
    -o-transition: all 0.2s linear;
48
    transition: all 0.2s linear;
49
}
50
ul#darkmenu li {
51
    -webkit-transition: -webkit-box-shadow, background 0.2s linear;
52
    -moz-transition: -moz-box-shadow, background 0.2s linear;
53
    -ms-transition: -moz-box-shadow, background 0.2s linear;
54
    -o-transition: -o-box-shadow, background 0.2s linear;
55
    transition: box-shadow, background 0.2s linear;
56
    background: #565656;
57
    float: left;
58
    text-shadow: 0px -1px 0px black;
59
    font-size: 13px;
60
    text-transform: uppercase;
61
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);
62
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);
63
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0,0,0,0.3), inset -1px 0px 0px rgba(255, 255, 255, 0.1), inset 1px 0px 0px rgba(0,0,0,0.2);
64
}
65
ul#darkmenu li:first-child {
66
    -moz-border-radius-topleft: 10px;
67
    -moz-border-radius-topright: 0px;
68
    -moz-border-radius-bottomright: 0px;
69
    -moz-border-radius-bottomleft: 10px;
70
    -webkit-border-radius: 10px 0px 0px 10px;
71
    border-radius: 10px 0px 0px 10px;
72
}
73
ul#darkmenu li:last-child {
74
    -moz-border-radius-topleft: 0px;
75
    -moz-border-radius-topright: 10px;
76
    -moz-border-radius-bottomright: 10px;
77
    -moz-border-radius-bottomleft: 0px;
78
    -webkit-border-radius: 0px 10px 10px 0px;
79
    border-radius: 0px 10px 10px 0px;
80
}
81
ul#darkmenu li:hover {
82
    -webkit-animation: hover 0.5s 1;
83
    -moz-animation: hover 0.5s 1;
84
    -ms-animation: hover 0.5s 1;
85
    -o-animation: hover 0.5s 1;
86
    animation: hover 0.5s 1;
87
    background: #063d4c;
88
    text-shadow: 0px 0px 2px #11afda;
89
}
90
ul#darkmenu li:active {
91
    background: #05303c;
92
    -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);
93
    -moz-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);
94
    box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 2px 4px rgba(0,0,0,0.4);
95
}
96
ul#darkmenu li a {
97
    padding: 10px;
98
    display: block;
99
    color: white;
100
    text-decoration: none;
101
}
102
ul#darkmenu li:active a { padding: 11px 10px 9px 10px }
 

A Flash Blue Menu

CSSDeck G+