Ajax Loader
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
1
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
2
<div class="menu">
3
            <a class="yellow" href="#">Home</a>
4
            <a class="green" href="#">Blog</a>
5
            <a class="pink" href="#">Kureshki</a>
6
            <a class="purple" href="#">Themes</a>
7
            <a class="blue" href="#">Madenca</a>
8
            <a class="orange" href="#">Contact</a>
9
        </div>
 
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
1
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
2
* {
3
  margin: 0;
4
  padding: 0;
5
}
6
body {
7
  background: #111;
8
  color: #fff;
9
  font-family: 'Open sans', sans-serif;
10
  font-weight: 300;
11
  font-size: 20pt;
12
}
13
a {
14
  color: #fff;
15
  text-decoration: none;
16
}
17
 
18
.menu {
19
  width: 570px;
20
  margin: 30px auto;
21
}
22
.menu a {
23
  width: 180px;
24
  line-height: 180px;
25
  display: block;
26
  margin: 5px;
27
  text-align: center;
28
  float: left;
29
  opacity: 0.3;
30
}
31
.yellow { background: #fdd22a; }
32
.blue { background: #009fe3; }
33
.purple { background: #574696; }
34
.orange { background: #ee7202; }
35
.pink { background: #e61c67; }
36
.green { background: #96c11f; }
 
JavaScript
$(document).ready(function() {
1
$(document).ready(function() {
2
              $('.menu a').hover(function() {
3
                $(this).stop().animate({
4
                   opacity: 1
5
                 }, 200);
6
                    }, function() {
7
               $(this).stop().animate({
8
                opacity: 0.3
9
                 }, 200);
10
              });
11
            });
 

Windows menu

CSSDeck G+