Ajax Loader
HTML 
  <div class="old">
1
  <div class="old">
2
    <ul>
3
      <li><a href="javascript:void(0);"></a></li>
4
      <li><a href="javascript:void(0);">Store</a></li>
5
      <li><a href="javascript:void(0);">Mac</a></li>
6
      <li><a class="current" href="javascript:void(0);">iPod</a></li>
7
      <li><a href="javascript:void(0);">iPhone</a></li>
8
      <li><a href="javascript:void(0);">iPad</a></li>
9
      <li><a href="javascript:void(0);">iTunes</a></li>
10
      <li><a href="javascript:void(0);">Support</a></li>
11
    </ul>
12
  </div>
13
  <div class="new">
14
    <ul>
15
      <li><a href="javascript:void(0);"></a></li>
16
      <li><a href="javascript:void(0);">Store</a></li>
17
      <li><a href="javascript:void(0);">Mac</a></li>
18
      <li><a class="current" href="javascript:void(0);">iPod</a></li>
19
      <li><a href="javascript:void(0);">iPhone</a></li>
20
      <li><a href="javascript:void(0);">iPad</a></li>
21
      <li><a href="javascript:void(0);">iTunes</a></li>
22
      <li><a href="javascript:void(0);">Support</a></li>
23
    </ul>
24
  </div>
 
CSS 
* {
1
* {
2
  margin:0;
3
  padding:0;
4
}
5
html, body {
6
  height:100%;
7
  background: #F7F7F7;
8
}
9
 
10
div {
11
  text-align: center;
12
  position: relative;
13
  top: 10%;
14
  padding: 20px;
15
  min-width: 820px;
16
}
17
 
18
 
19
/* Old */
20
 
21
.old ul {
22
  display: inline-block;
23
  outline: none;
24
  cursor: pointer;
25
  text-align: center;
26
  -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1);
27
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1);
28
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
29
}
30
 
31
.old ul li {
32
  float: left;
33
  list-style: none;
34
}
35
 
36
.old ul li a {
37
  font: bold 12px/100% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
38
  padding: 11px 35px;
39
  text-decoration: none;
40
  color: rgba(0,0,0,.8);
41
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
42
43
  background: -webkit-linear-gradient(top, #cacaca, #848484);
44
  background: -moz-linear-gradient(top, #cacaca, #848484);
45
  background: -ms-linear-gradient(top, #cacaca, #848484);
46
  background: -o-linear-gradient(top, #cacaca, #848484);
47
  background: linear-gradient(to bottom, #cacaca, #848484);
48
}
49
 
50
.old ul li a:before {
51
  border-left: 1px solid rgba(255,255,255,.1);
52
  content: "";
53
  padding: 10px 35px;
54
  margin: 0 -35px;
55
  position: relative;
56
}
57
 
58
.old ul li a:after {
59
  border-right: 1px solid rgba(255,255,255,.1);
60
  content: "";
61
  padding: 10px 35px;
62
  margin: 0 -35px;
63
  position: relative;
64
}
65
 
66
.old ul li:last-child a:after {border: none;}
67
 
68
.old ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}
69
.old ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}
70
 
71
.old ul li a:hover {
72
  border-right: 1px solid rgba(255,255,255,.2);
73
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
74
75
  background: -webkit-linear-gradient(top,  #929292,  #535353);
76
  background: -moz-linear-gradient(top,  #929292,  #535353);
77
  background: -ms-linear-gradient(top,  #929292,  #535353);
78
  background: -o-linear-gradient(top,  #929292,  #535353);
79
  background: linear-gradient(to bottom,  #929292,  #535353);
80
}
81
 
82
.old ul li a:active {
83
  -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
84
  -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
85
  box-shadow: inset 0 5px 10px rgba(0,0,0,.5);
86
}
87
 
88
.old ul li a.current {
89
  background: -webkit-linear-gradient(top,  #383a3a,  #525051);
90
  background: -moz-linear-gradient(top,  #383a3a,  #525051);
91
  background: -ms-linear-gradient(top,  #383a3a,  #525051);
92
  background: -o-linear-gradient(top,  #383a3a,  #525051);
93
  background: linear-gradient(to bottom,  #383a3a,  #525051);
94
95
  -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.8);
96
  -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.8);
97
  box-shadow: inset 0 5px 10px rgba(0,0,0,.8);
98
99
  color: #ffffff;
100
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
101
}
102
 
103
/* New */
104
 
105
.new ul {
106
  display: inline-block;
107
  outline: none;
108
  cursor: pointer;
109
  text-align: center;
110
111
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
112
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
113
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
114
}
115
 
116
.new ul li {
117
  float: left;
118
  list-style: none;
119
}
120
 
121
.new ul li a {
122
  font: bold 12px/100% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
123
  border-right: 1px solid #646464;
124
  padding: 11px 35px;
125
  text-decoration: none;
126
  color: rgba(255,255,255,1);
127
  text-shadow: 0 -1px 0 rgba(0,0,0,.9);
128
129
  background: -webkit-linear-gradient(top, #8b8b8b, #717171 49%, #5e5e5e 50%, #787878);
130
  background: -moz-linear-gradient(top, #8b8b8b, #717171 49%, #5e5e5e 50%, #787878);
131
  background: -ms-linear-gradient(top, #8b8b8b, #717171 49%, #5e5e5e 50%, #787878);
132
  background: -o-linear-gradient(top, #8b8b8b, #717171 49%, #5e5e5e 50%, #787878);
133
  background: linear-gradient(to bottom, #8b8b8b, #717171 49%, #5e5e5e 50%, #787878);
134
}
135
 
136
.new ul li a:before {
137
  border-left: 1px solid rgba(255,255,255,.1);
138
  content: "";
139
  padding: 10px 35px;
140
  margin: 0 -35px;
141
  position: relative;
142
}
143
 
144
.new ul li a:after {
145
  border-right: 1px solid rgba(255,255,255,.1);
146
  content: "";
147
  padding: 10px 35px;
148
  margin: 0 -35px;
149
  position: relative;
150
}
151
 
152
.new ul li:last-child a:after {border: none;}
153
 
154
.new ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}
155
.new ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}
156
 
157
.new ul li a:hover {
158
  border-right: 1px solid rgba(255,255,255,.2);
159
  color: #ffffff;
160
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
161
162
  -webkit-box-shadow: inset 0 0 40px rgba(255,255,255,.2);
163
  -moz-box-shadow: inset 0 0 40px rgba(255,255,255,.2);
164
  box-shadow: inset 0 0 40px rgba(255,255,255,.2);
165
166
  background-image: -webkit-linear-gradient(top, #656556, #4a4a4a 49%, #3b3b3b 50%, #454545);
167
  background-image: -moz-linear-gradient(top, #656556, #4a4a4a 49%, #3b3b3b 50%, #454545);
168
  background-image: -ms-linear-gradient(top, #656556, #4a4a4a 49%, #3b3b3b 50%, #454545);
169
  background-image: -o-linear-gradient(top, #656556, #4a4a4a 49%, #3b3b3b 50%, #454545);
170
  background-image: linear-gradient(to bottom, #656556, #4a4a4a 49%, #3b3b3b 50%, #454545);
171
}
172
 
173
.new ul li a:active {
174
  -webkit-box-shadow: inset 0 2px 8px rgba(0,0,0,.9);
175
  -moz-box-shadow: inset 0 2px 8px rgba(0,0,0,.9);
176
  box-shadow: inset 0 2px 8px rgba(0,0,0,.9);
177
}
178
 
179
.new ul li a.current {
180
  background: -webkit-linear-gradient(top, #383a3a, #525051);
181
  background: -moz-linear-gradient(top, #383a3a, #525051);
182
  background: -ms-linear-gradient(top, #383a3a, #525051);
183
  background: -o-linear-gradient(top, #383a3a, #525051);
184
  background: linear-gradient(to bottom, #383a3a, #525051);
185
186
  -webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.8);
187
  -moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.8);
188
  box-shadow: inset 0 5px 10px rgba(0,0,0,.8);
189
190
  color: #ffffff;
191
  text-shadow: 0 1px 0 rgba(0,0,0,.9);
192
}
193
 
 

Apple Navigation Menu in Pure CSS

CSSDeck G+