Ajax Loader
HTML
<!--//////////////Created by Ryan Bishop./////////////////// 
1
<!--//////////////Created by Ryan Bishop./////////////////// 
2
Check out more of my work at: http://dribbble.com/RyanBishop 
3
---------------------------OR-------------------------------
4
------------Follow me on twitter: @abletroner---------------
5
//////////////////////////////////////////////////////////-->
6
 
7
 
8
<!-- Google Fonts -->
9
<link href='http://fonts.googleapis.com/css?family=Strait' rel='stylesheet' type='text/css'>
10
 
11
<!-- HTML -->
12
 
13
<div class="menu-container">
14
      
15
  <div class="nav">
16
      <div class="settings"></div>
17
  </div>
18
  
19
  <div class="menu">
20
      <ul>
21
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/4JPrK.png"><p>Search</p></a></li>
22
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/jHwHy.png"><p>Upload</p></a></li>
23
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/Gyusy.png"><p>Location</p></a></li>
24
        <li><a href="#" target="_blank"><img src="http://i.imgur.com/mbWpc.png"><p>Contacts</p></a></li>
25
      </ul>
26
  </div>
27
  
28
</div>
 
CSS
/*///////////////Created by Ryan Bishop.//////////////////// 
1
/*///////////////Created by Ryan Bishop.//////////////////// 
2
Check out more of my work at: http://dribbble.com/RyanBishop 
3
---------------------------OR-------------------------------
4
------------Follow me on twitter: @abletroner---------------
5
//////////////////////////////////////////////////////////*/
6
 
7
 
8
* {
9
  margin: 0;
10
  padding: 0;
11
}
12
 
13
body {
14
 background-color: #a3cabd;
15
}
16
 
17
.menu-container {
18
  display: block;
19
  position: relative;
20
  width: 300px;
21
  background-color: #f3f0ef;
22
  margin: 5% auto 0;
23
  padding: 0;
24
  border-radius:5px;
25
  box-shadow:  inset 0 0 1px rgba(255,255,255,1);
26
  box-shadow:  5px 5px 15px 1px rgba(0,0,0,0.1);
27
}
28
 
29
.nav{
30
  background-color: #ed6b3a;
31
  height:40px;
32
  border-radius:5px 5px 0 0;
33
}
34
 
35
.settings {
36
  height:20px;
37
  float:right;
38
  background-image:url(http://i.imgur.com/CLs7u.png);
39
  width:20px;
40
  margin:10px;
41
}
42
 
43
.menu ul {
44
  list-style:none;
45
}
46
 
47
.menu ul li {
48
  border-top:1px solid rgba(0,0,0,0.1);
49
  padding:11px 10px;
50
  box-shadow:inset 0 1px 1px #fff;
51
  text-indent:10px;
52
  }
53
 
54
.menu ul li a {
55
  font-size:14px;
56
  color:#a4a3a3;
57
  font-family: 'Strait', sans-serif;
58
  font-size:14px;
59
  text-decoration:none;
60
  text-shadow: 1px 1px 1px #fff;
61
}
62
 
63
.menu ul li img {
64
  float:left;
65
  margin:-2px 0 0 0;
66
}
67
 
68
.menu ul li:hover {
69
  border-left:3px solid #ed6b3a;
70
  background-color:rgba(0,0,0,0.02);
71
}
72
 
73
 
 

CSS menu rebound

CSSDeck G+