Ajax Loader
HTML 
<nav class="mainNav">
1
<nav class="mainNav">
2
    <ul>
3
        <li><a href="#" data-title="Home">Home</a></li>
4
        <li><a href="#" data-title="About">About</a></li>
5
        <li><a href="#" data-title="Clients">Clients</a></li>
6
        <li><a href="#" data-title="Contact Us">Contact Us</a></li>
7
    </ul>
8
</nav>•
 
CSS 
body {
1
body {
2
    font-size: 100%;
3
    padding: 3em;
4
}
5
.mainNav {
6
    float: left;
7
    transform: perspective(500px);
8
    transform-style: preserve-3d;
9
}
10
.mainNav ul {
11
    list-style: none;
12
    padding: 0;
13
}
14
.mainNav a {
15
    background-color: #f66;
16
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
17
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
18
    backface-visibility: hidden;
19
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
20
                inset 0 0 1.5em hsla(0,0%,0%,.25);
21
    color: #322;
22
    display: block;
23
    font: bold 1em/3 sans-serif;
24
    padding: 0 1.5em;
25
    position: relative;
26
    text-align: center;
27
    text-decoration: none;
28
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
29
    transition: .5s;
30
    transform-origin: 50% 0;
31
    transform-style: preserve-3d;
32
    width: 6em;
33
}
34
.mainNav a:after {
35
    background-color: inherit;
36
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
37
                      linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
38
                      linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
39
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
40
                inset 0 0 1.5em hsla(0,0%,0%,.4);
41
    bottom: 0;
42
    color: #fff;
43
    content: attr(data-title);
44
    left: 100%;
45
    line-height: 3;
46
    position: absolute;
47
    top: 0;
48
    transform: rotateY(90deg);
49
    transform-origin: 0 0;
50
    width: 100%;
51
}
52
.mainNav a:before {
53
    background-color: inherit;
54
    background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
55
                      linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
56
    bottom: 0;
57
    content: '';
58
    height: 9em;
59
    left: 100%;
60
    position: absolute;
61
    top: 0;
62
    transform-origin: 0 0;
63
    width: 100%;
64
}
65
.mainNav li:nth-child(-n+2) a:before {
66
    transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
67
}
68
.mainNav li:nth-child(n+3) a:before {
69
    transform: rotateX(-90deg) translateX(-9em);
70
}
71
.mainNav li:hover a {
72
    transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
73
    z-index: 10;
74
}•
 

Pure CSS 3D Menu

CSSDeck G+