Ajax Loader
×
HTML 
<div id="nav">
1
<div id="nav">
2
  <ul>
3
    <a href="#">Menu<span class="entypo-right-open-big"></span></a>
4
    <li><a href="#">Profile <span class="entypo-user"></span></a></li>
5
    <li><a href="#">Media <span class="entypo-video"></span></a></li>
6
    <li><a href="#">Games <span class="entypo-rocket"></span></a></li>
7
    <li><a href="#">Friends <span class="entypo-users"></span></a></li>
8
  </ul>
9
</div>    
 
CSS 
@import url(http://weloveiconfonts.com/api/?family=entypo);
1
@import url(http://weloveiconfonts.com/api/?family=entypo);
2
@import url(http://fonts.googleapis.com/css?family=Alef);
3
/* entypo */
4
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }
5
*{-webkit-font-smoothing:antialiased;}
6
body {
7
    background: url(http://subtlepatterns.com/patterns/cream_pixels_@2X.png);
8
    /*background-size*/
9
    -webkit-background-size: 160px;
10
    -moz-background-size: 160px;
11
    -o-background-size: 160px;
12
    background-size: 160px;
13
    font-family: Alef;
14
}
15
#nav {
16
    width: 180px;
17
    margin: 100px auto;
18
}
19
ul {
20
    list-style: none;
21
    padding: 0;
22
    margin: 0;
23
    width: 180px;
24
}
25
ul a {
26
    display: block;
27
    width: 100%;
28
    height: 44px;
29
    background: #E7533C;
30
    color: #fafafa;
31
    text-decoration: none;
32
    text-align: left;
33
    line-height: 2;
34
    padding-left: 10px;
35
    font-size: 1.4em;
36
    border-bottom: 3px solid #cc4531;
37
}
38
ul a span {
39
    float: right;
40
    display: block;
41
    margin: 0;
42
    width: 44px;
43
    height: 44px;
44
    font-size: 1.4em;
45
    text-align: center;
46
    line-height: 1.5;
47
}
48
ul li {
49
    width: 0;
50
    height: 0px;
51
    background: #E7533C;
52
    clear: both;
53
}
54
ul li a {
55
    color: transparent;
56
    height: 0;
57
    /*box-shadow*/
58
    -webkit-box-shadow: 0 2px  2px rgba(0,0,0,.1);
59
    -moz-box-shadow: 0 2px  2px rgba(0,0,0,.1);
60
    box-shadow: 0 2px  2px rgba(0,0,0,.1);
61
    padding-left: 0;
62
}
63
ul li a span {
64
    font-size: .9em;
65
    line-height: 2.4;
66
}
67
ul:hover li a { padding-left: 10px }
68
ul:hover span { background: #cc4531 }
69
ul:hover li span { background: transparent }
70
ul li:hover > a { background: #cc4531 }
71
ul li:hover {
72
    margin-top: 8px;
73
    margin-bottom: 8px;
74
}
75
ul li:nth-child(1) {
76
    transition: all 0s ease;
77
}
78
ul li:nth-child(2) {
79
 
80
    transition: all 0s ease;
81
}
82
ul li:nth-child(3) {
83
84
    transition: all 0s ease;
85
}
86
ul li:nth-child(4) {
87
 
88
    transition: all 0s ease;
89
}
90
ul a:hover > span { background: #cc4531 }
91
ul:hover > li a {
92
    color: #fff;
93
    height: 44px;
94
}
95
ul li a:hover { border-bottom: 3px solid #9d3323 }
96
ul:hover li:nth-child(2) {
97
    width: 100%;
98
    height: 44px;
99
100
    transition: all .1s ease;
101
}
102
ul:hover li:nth-child(3) {
103
    width: 100%;
104
    height: 44px;
105
  
106
    transition: all .1s ease .1s;
107
}
108
ul:hover li:nth-child(4) {
109
    width: 100%;
110
    height: 44px;
111
  
112
    transition: all .1s ease .2s;
113
}
114
ul:hover li:nth-child(5) {
115
    width: 100%;
116
    height: 44px;
117
118
    transition: all .1s ease .3s;
119
}
 

Untitled

CSSDeck G+