Ajax Loader
×
HTML 
<html>
1
<html>
2
  <head>
3
4
  </head>
5
  <body><div class="area"></div><nav class="main-menu">
6
            <ul>
7
                <li>
8
                    <a href="#">
9
                        <i class="fa fa-home fa-2x"></i>
10
                        <span class="nav-text">
11
                            Dashboard
12
                        </span>
13
                    </a>
14
                
15
                </li>
16
                <li class="has-subnav">
17
                    <a href="#">
18
                        <i class="fa fa-laptop fa-2x"></i>
19
                        <span class="nav-text">
20
                            UI Components
21
                        </span>
22
                    </a>
23
                  
24
                </li>
25
                <li class="has-subnav">
26
                    <a href="#">
27
                       <i class="fa fa-list fa-2x"></i>
28
                        <span class="nav-text">
29
                            Forms
30
                        </span>
31
                    </a>
32
                  
33
                </li>
34
                <li class="has-subnav">
35
                    <a href="#">
36
                       <i class="fa fa-folder-open fa-2x"></i>
37
                        <span class="nav-text">
38
                            Pages
39
                        </span>
40
                    </a>
41
                  
42
                </li>
43
                <li>
44
                    <a href="#">
45
                        <i class="fa fa-bar-chart-o fa-2x"></i>
46
                        <span class="nav-text">
47
                            Graphs and Statistics
48
                        </span>
49
                    </a>
50
                </li>
51
                <li>
52
                    <a href="#">
53
                        <i class="fa fa-font fa-2x"></i>
54
                        <span class="nav-text">
55
                            Typography and Icons
56
                        </span>
57
                    </a>
58
                </li>
59
                <li>
60
                   <a href="#">
61
                       <i class="fa fa-table fa-2x"></i>
62
                        <span class="nav-text">
63
                            Tables
64
                        </span>
65
                    </a>
66
                </li>
67
                <li>
68
                   <a href="#">
69
                        <i class="fa fa-map-marker fa-2x"></i>
70
                        <span class="nav-text">
71
                            Maps
72
                        </span>
73
                    </a>
74
                </li>
75
                <li>
76
                    <a href="#">
77
                       <i class="fa fa-info fa-2x"></i>
78
                        <span class="nav-text">
79
                            Documentation
80
                        </span>
81
                    </a>
82
                </li>
83
            </ul>
84
 
85
            <ul class="logout">
86
                <li>
87
                   <a href="#">
88
                         <i class="fa fa-power-off fa-2x"></i>
89
                        <span class="nav-text">
90
                            Logout
91
                        </span>
92
                    </a>
93
                </li>
94
            </ul>
95
        </nav>
96
  </body>
97
    </html>
 
CSS 
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
1
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
2
}
3
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
4
.fa-2x {
5
font-size: 2em;
6
}
7
.fa {
8
position: relative;
9
display: table-cell;
10
width: 60px;
11
height: 36px;
12
text-align: center;
13
vertical-align: middle;
14
font-size:20px;
15
}
16
 
17
 
18
 
19
html {
20
  background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
21
            -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
22
            -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
23
            -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
24
            -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
25
            -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
26
background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
27
            -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
28
            -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
29
            -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
30
            -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
31
            -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
32
background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
33
            linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
34
            linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
35
            linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
36
            linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
37
            linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
38
background-size: 20px 20px;
39
background-color: #131313;
40
-pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px / 20px,
41
                 linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px / 20px,
42
                 linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px / 20px,
43
                 linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px / 20px,
44
                 linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
45
                 linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424)
46
                 0 0 / 20px #131313;
47
behavior: url(/pie/PIE.htc);
48
}
49
 
50
 
51
.main-menu:hover,nav.main-menu.expanded {
52
width:250px;
53
overflow:visible;
54
}
55
 
56
.main-menu {
57
background:rgba(251, 251, 251, .25);
58
border-right:1px solid rgba(69, 69, 69, .75);
59
position:absolute;
60
top:0;
61
bottom:0;
62
height:100%;
63
left:0;
64
width:60px;
65
overflow:hidden;
66
-webkit-transition:width .05s linear;
67
transition:width .05s linear;
68
-webkit-transform:translateZ(0) scale(1,1);
69
z-index:1000;
70
}
71
 
72
.main-menu>ul {
73
margin:7px 0;
74
}
75
 
76
.main-menu li {
77
position:relative;
78
display:block;
79
width:250px;
80
}
81
 
82
.main-menu li>a {
83
position:relative;
84
display:table;
85
border-collapse:collapse;
86
border-spacing:0;
87
color:rgba(255, 255, 255, .5);
88
 font-family: arial;
89
font-size: 14px;
90
text-decoration:none;
91
-webkit-transform:translateZ(0) scale(1,1);
92
-webkit-transition:all .1s linear;
93
transition:all .1s linear;
94
95
}
96
 
97
.main-menu .nav-icon {
98
position:relative;
99
display:table-cell;
100
width:60px;
101
height:36px;
102
text-align:center;
103
vertical-align:middle;
104
font-size:18px;
105
}
106
 
107
.main-menu .nav-text {
108
position:relative;
109
display:table-cell;
110
vertical-align:middle;
111
width:190px;
112
  font-family: 'Titillium Web', sans-serif;
113
}
114
 
115
.main-menu>ul.logout {
116
position:absolute;
117
left:0;
118
bottom:0;
119
}
120
 
121
.no-touch .scrollable.hover {
122
overflow-y:hidden;
123
}
124
 
125
.no-touch .scrollable.hover:hover {
126
overflow-y:auto;
127
overflow:visible;
128
}
129
 
130
a:hover,a:focus {
131
text-decoration:none;
132
}
133
 
134
nav {
135
-webkit-user-select:none;
136
-moz-user-select:none;
137
-ms-user-select:none;
138
-o-user-select:none;
139
user-select:none;
140
}
141
 
142
nav ul,nav li {
143
outline:0;
144
margin:0;
145
padding:0;
146
}
147
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
148
  color:#fff;
149
background-color:#5fa2db;
150
  background: -webkit-linear-gradient(#5fa2db 20%, #3f82bb 90%);
151
  background: -moz-linear-gradient(#5fa2db 20%, #3f82bb 90%);
152
  background: linear-gradient(#5fa2db 20%, #3f82bb 90%);
153
}
154
.area {
155
float: left;
156
width: 100%;
157
height: 100%;
158
  background-color: transparent;
159
background-size: 50px 50px;
160
}
161
@font-face {
162
  font-family: 'Titillium Web';
163
  font-style: normal;
164
  font-weight: 300;
165
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
166
}
167
 
 

Untitled

CSSDeck G+