Ajax Loader
HTML 
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
1
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
2
<section style="background: #3498db; color: #fff;">
3
  <h1>Beautiful navigation hover effects</h1>
4
  <p class="center">Scroll down to see some effects in action</p>
5
  <p class="center"><small>please use a latest webkit browser like Chrome or Opera. Thank you.</small></p>
6
</section>
7
<section style="background: #e74c3c; color: #fff;">
8
  <h2>Underline Stroke</h2>
9
  <nav class="stroke">
10
    <ul>
11
      <li><a href="#">Home</a></li>
12
      <li><a href="#">About</a></li>
13
      <li><a href="#">Downloads</a></li>
14
      <li><a href="#">More</a></li>
15
      <li><a href="#">Nice staff</a></li>
16
    </ul>
17
  </nav>
18
</section>
19
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
20
  <h2>Underline Fill</h2>
21
  <nav class="fill">
22
    <ul>
23
      <li><a href="#">Home</a></li>
24
      <li><a href="#">About</a></li>
25
      <li><a href="#">Downloads</a></li>
26
      <li><a href="#">More</a></li>
27
      <li><a href="#">Nice staff</a></li>
28
    </ul>
29
  </nav>
30
</section>
31
<section style="background: #34495e; color: rgba(255, 255, 255, 0.5);">
32
  <h2>Circle Fill</h2>
33
  <nav class="circle">
34
    <ul>
35
      <li><a href="#">Home</a></li>
36
      <li><a href="#">About</a></li>
37
      <li><a href="#">Downloads</a></li>
38
      <li><a href="#">More</a></li>
39
      <li><a href="#">Nice staff</a></li>
40
    </ul>
41
  </nav>
42
</section>
43
<section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);">
44
  <h2>Shift</h2>
45
  <nav class="shift">
46
    <ul>
47
      <li><a href="#">Home</a></li>
48
      <li><a href="#">About</a></li>
49
      <li><a href="#">Downloads</a></li>
50
      <li><a href="#">More</a></li>
51
      <li><a href="#">Nice staff</a></li>
52
    </ul>
53
  </nav>
54
</section>
 
CSS 
body {
1
body {
2
  font-family: 'Roboto', sans-serif;
3
  padding: 0;
4
  margin: 0;
5
}
6
 
7
small {
8
  font-size: 12px;
9
  color: rgba(0, 0, 0, 0.4);
10
}
11
 
12
h1 {
13
  text-align: center;
14
  padding: 50px 0;
15
  font-weight: 800;
16
  margin: 0;
17
  letter-spacing: -1px;
18
  color: inherit;
19
  font-size: 40px;
20
}
21
 
22
h2 {
23
  text-align: center;
24
  font-size: 30px;
25
  margin: 0;
26
  font-weight: 300;
27
  color: inherit;
28
  padding: 50px;
29
}
30
 
31
.center {
32
  text-align: center;
33
}
34
 
35
section {
36
  height: 100vh;
37
}
38
 
39
/* NAVIGATION */
40
nav {
41
  width: 80%;
42
  margin: 0 auto;
43
  background: #fff;
44
  padding: 50px 0;
45
  box-shadow: 0px 5px 0px #dedede;
46
}
47
nav ul {
48
  list-style: none;
49
  text-align: center;
50
}
51
nav ul li {
52
  display: inline-block;
53
}
54
nav ul li a {
55
  display: block;
56
  padding: 15px;
57
  text-decoration: none;
58
  color: #aaa;
59
  font-weight: 800;
60
  text-transform: uppercase;
61
  margin: 0 10px;
62
}
63
nav ul li a,
64
nav ul li a:after,
65
nav ul li a:before {
66
  transition: all .5s;
67
}
68
nav ul li a:hover {
69
  color: #555;
70
}
71
 
72
 
73
/* stroke */
74
nav.stroke ul li a,
75
nav.fill ul li a {
76
  position: relative;
77
}
78
nav.stroke ul li a:after,
79
nav.fill ul li a:after {
80
  position: absolute;
81
  bottom: 0;
82
  left: 0;
83
  right: 0;
84
  margin: auto;
85
  width: 0%;
86
  content: '.';
87
  color: transparent;
88
  background: #aaa;
89
  height: 1px;
90
}
91
nav.stroke ul li a:hover:after {
92
  width: 100%;
93
}
94
 
95
nav.fill ul li a {
96
  transition: all 2s;
97
}
98
 
99
nav.fill ul li a:after {
100
  text-align: left;
101
  content: '.';
102
  margin: 0;
103
  opacity: 0;
104
}
105
nav.fill ul li a:hover {
106
  color: #fff;
107
  z-index: 1;
108
}
109
nav.fill ul li a:hover:after {
110
  z-index: -10;
111
  animation: fill 1s forwards;
112
  -webkit-animation: fill 1s forwards;
113
  -moz-animation: fill 1s forwards;
114
  opacity: 1;
115
}
116
 
117
/* Circle */
118
nav.circle ul li a {
119
  position: relative;
120
  overflow: hidden;
121
  z-index: 1;
122
}
123
nav.circle ul li a:after {
124
  display: block;
125
  position: absolute;
126
  margin: 0;
127
  top: 0;
128
  bottom: 0;
129
  left: 0;
130
  right: 0;
131
  content: '.';
132
  color: transparent;
133
  width: 1px;
134
  height: 1px;
135
  border-radius: 50%;
136
  background: transparent;
137
}
138
nav.circle ul li a:hover:after {
139
  -webkit-animation: circle 1.5s ease-in forwards;
140
}
141
 
142
/* SHIFT */
143
nav.shift ul li a {
144
  position:relative;
145
  z-index: 1;
146
}
147
nav.shift ul li a:hover {
148
  color: #91640F;
149
}
150
nav.shift ul li a:after {
151
  display: block;
152
  position: absolute;
153
  top: 0;
154
  left: 0;
155
  bottom: 0;
156
  right: 0;
157
  margin: auto;
158
  width: 100%;
159
  height: 1px;
160
  content: '.';
161
  color: transparent;
162
  background: #F1C40F;
163
  visibility: none;
164
  opacity: 0;
165
  z-index: -1;
166
}
167
nav.shift ul li a:hover:after {
168
  opacity: 1;
169
  visibility: visible;
170
  height: 100%;
171
}
172
 
173
 
174
 
175
/* Keyframes */
176
@-webkit-keyframes fill {
177
  0% {
178
    width: 0%;
179
    height: 1px;
180
  }
181
  50% {
182
    width: 100%;
183
    height: 1px;
184
  }
185
  100% {
186
    width: 100%;
187
    height: 100%;
188
    background: #333;
189
  }
190
}
191
 
192
/* Keyframes */
193
@-webkit-keyframes circle {
194
  0% {
195
    width: 1px;
196
    top: 0;
197
    left: 0;
198
    bottom: 0;
199
    right: 0;
200
    margin: auto;
201
    height: 1px;
202
    z-index: -1;
203
    background: #eee;
204
    border-radius: 100%;
205
  }
206
  100% {
207
    background: #aaa;
208
    height: 5000%;
209
    width: 5000%;
210
    z-index: -1;
211
    top: 0;
212
    bottom: 0;
213
    left: 0;
214
    right: 0;
215
    margin: auto;
216
    border-radius: 0;
217
  }
218
}
 

Beautiful CSS navigation hover effects

CSSDeck G+