Ajax Loader
HTML 
<nav id="rolling-nav">
1
<nav id="rolling-nav">
2
    <ul>
3
        <li><a href="#" data-clone="Home">Home</a></li>
4
        <li><a href="#" data-clone="About">About</a></li>
5
        <li><a href="#" data-clone="Portfolio">Portfolio</a></li>
6
        <li><a href="#" data-clone="Comments">Comments</a></li>
7
        <li><a href="#" data-clone="Contact">Contact</a></li>
8
    </ul>
9
</nav>
 
CSS 
body {
1
body {
2
  background-color:#111;
3
  margin:0px 0px;
4
  padding: 100px 0px 100px 0px;
5
}
6
 
7
#rolling-nav {
8
  font:normal 12px 'Trebuchet MS',Trebuchet,Arial,Sans-Serif;
9
  color:white;
10
  text-transform:uppercase;
11
  /* outline:1px solid; */
12
  width:550px; /* Fixed width. Measure it manually */
13
  margin:0px auto;
14
}
15
 
16
#rolling-nav ul {
17
  height:50px;
18
  margin:0px 0px;
19
  padding:0px 0px;
20
  overflow:hidden;
21
}
22
 
23
#rolling-nav li {
24
  float:left;
25
  display:inline;
26
  list-style:none;
27
  margin:0px 0px;
28
  padding:0px 0px;
29
}
30
 
31
#rolling-nav a,
32
#rolling-nav a:before {
33
  display:block;
34
  margin:0px 0px;
35
  padding:0px 30px;
36
  line-height:50px;
37
  color:white;
38
  text-decoration:none;
39
  background-color:#900;
40
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
41
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
42
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
43
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
44
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
45
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
46
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
47
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
48
  position:relative;
49
  -webkit-transition:all 0.3s ease-in-out;
50
  -moz-transition:all 0.3s ease-in-out;
51
  -ms-transition:all 0.3s ease-in-out;
52
  -o-transition:all 0.3s ease-in-out;
53
  transition:all 0.3s ease-in-out;
54
}
55
 
56
#rolling-nav a:before {
57
  content:attr(data-clone);
58
  position:absolute;
59
  top:100%;
60
  right:0px;
61
  left:0px;
62
  display:block;
63
  background-color:white;
64
  background-image:-webkit-linear-gradient(top, #ddd, white);
65
  background-image:-moz-linear-gradient(top, #ddd, white);
66
  background-image:-ms-linear-gradient(top, #ddd, white);
67
  background-image:-o-linear-gradient(top, #ddd, white);
68
  background-image:linear-gradient(top, #ddd, white);
69
  border-top:2px solid rgba(0,0,0,0.2);
70
  color:#333;
71
}
72
 
73
#rolling-nav a:hover {
74
  margin-top:-50px;
75
  margin-bottom:1px;
76
}
 

Fancy Rolling Navigation

CSSDeck G+