Ajax Loader
HTML 
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html lang="en-US">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Menu</title>
6
</head>
7
<body>
8
9
<header>
10
<div id="navigation">
11
<div class="arrows">
12
  <span class="ar-left"></span>
13
  <span class="ar-right"></span>
14
  <span class="ar-left2"></span>
15
  <span class="ar-right2"></span>
16
</div>
17
 
18
<div class="dark-color">
19
<div class="light-color">
20
<a href="#" id="logo">Kerixmix Style*</a>
21
<nav>
22
  <ul>
23
    <li><a href="#" class="active-menu">Home</a></li>
24
    <li><a href="#">Services</a></li>
25
    <li><a href="#">Portfolio</a></li>
26
    <li><a href="#">About us</a></li>
27
    <li><a href="#">Contact</a></li>
28
  </ul>
29
</nav>
30
</div>
31
</div>
32
</div>
33
</header>
34
35
</body>
36
</html>
 
CSS 
/*
1
/*
2
 * Copyright (c) 2012-2013 Arbaoui Mehdi
3
 * http://www.depotwebdesigner.com
4
 */
5
body {
6
  padding:5px;
7
  font-family: Georgia;
8
}
9
 
10
#navigation {
11
  width:900px;
12
  font-size:14px;
13
  position: relative;
14
  left:27px;
15
}
16
 
17
#navigation a {
18
  color:#fff;
19
  text-decoration:none;
20
}
21
 
22
#navigation nav {
23
  box-shadow: 0 0 16px -1px #96211b;
24
  text-transform: uppercase;
25
  background: #dc5248;
26
  height:58px;
27
  border-left:1px solid #e45a4e;
28
  border-right:1px solid #e45a4e;
29
  z-index:3;
30
  position: relative;
31
  width:95%;
32
  left:2.4%;
33
}
34
 
35
nav a {
36
  padding:4px 20px;
37
  border-radius:15px;
38
}
39
 
40
nav a:hover { background:#aa2b1d; }
41
 
42
.active-menu {
43
  padding:5px 25px;
44
  background:#f4695b;
45
  margin-right:15px;
46
}
47
 
48
#navigation ul {
49
  padding:0;
50
  margin:0;
51
  position: absolute;
52
  top:40%;
53
  right:30px;
54
}
55
 
56
#navigation ul li {
57
  float:left;
58
  list-style: none;
59
  margin-left:0;
60
}
61
 
62
#logo {
63
  position:absolute;
64
  top:30%;
65
  left:5%;
66
  font-size:22px;
67
  z-index:4;
68
  font-style: italic;
69
  text-shadow: 1px -2px 4px #962215;
70
}
71
 
72
.dark-color {
73
  position: relative;
74
  width:100%;
75
  height: 79px;
76
  background:#aa2b1d;
77
}
78
 
79
.light-color {
80
  background: #dc5248;
81
  z-index: 3;
82
  position: relative;
83
  width:102%;
84
  top:13%;
85
  left:-1%;
86
}
87
 
88
.arrows {
89
  position:absolute;
90
  width:100%;
91
  height: 100%;
92
}
93
 
94
 .arrows span {
95
  position: absolute;
96
  width:0;
97
  height:0;
98
  border-top: 39px inset transparent;
99
  border-bottom: 39px inset transparent;
100
}
101
 
102
.ar-left {
103
  left:0;
104
  border-left: 10px solid #fff;
105
  z-index:2;
106
}
107
 
108
.ar-right {
109
  right:0;
110
  border-right: 10px solid #fff;
111
  z-index:2;
112
}
113
 
114
.ar-left2, .ar-right2 {
115
  border-top: 30px inset transparent !important;
116
  border-bottom: 30px inset transparent !important;
117
  top:9.7%;
118
  z-index:4;
119
}
120
 
121
.ar-left2 {
122
  left:-1.1%;
123
  border-left: 12px solid #fff;
124
}
125
 
126
.ar-right2 {
127
  right:-1%;
128
  border-right: 12px solid #fff;
129
}
 

Retro Navigation - Full CSS

CSSDeck G+