Ajax Loader
HTML 
<div id="header">
1
<div id="header">
2
  <div id="logo">
3
  </div>
4
5
<input type="checkbox" class="checkbox" name="menu" value="mobiledropmenu" id="mobiledropmenu">
6
            <label for="mobiledropmenu" class="label"><img src="http://developer.jmbarcelon.com/Images/dropmenu.png"></label>
7
8
  <div class="title">
9
    <div class="button">Home</div>
10
    <div class="button">Casa</div>
11
    <div class="button">Zahause</div>
12
    <div class="button">Maison</div>
13
  </div>
14
15
 
16
17
</div>
18
 
19
<h1>Drop-Down Menu</h1>
 
CSS 
body {
1
body {
2
  background:#E5F2FF;
3
}
4
 
5
#header {
6
  position:fixed;
7
  width:100%;
8
  background:#72BBFF;
9
  z-index:2;
10
}
11
 
12
.checkbox {
13
  display: none;
14
}
15
.label{
16
       -webkit-transition:.3s;
17
   -moz-transition:.3s;
18
   -o-transition:.3s;
19
   transition:.3s;
20
  width: 64px;
21
  height:64px;
22
  font-size: 20px;
23
  display: inline-block;
24
  background-size:cover;
25
  margin:.5em;
26
  background:rgba(0,132,255,0.15);
27
  box-shadow: 1px 1px 5px rgba(0, 135, 255,0.5);
28
  border-radius:1px;
29
}
30
 
31
.checkbox:checked + .label {
32
     -webkit-transition:.3s;
33
   -moz-transition:.3s;
34
   -o-transition:.3s;
35
   transition:.3s;
36
  box-shadow:inset 0px 0px 10px rgba(0, 135, 255,0.5);
37
    background:rgba(0,132,255,0.3)
38
}
39
 
40
#mobiledropmenu:checked ~ .title {
41
   -webkit-transition:1s;
42
  width: 100%;
43
  height: 250px;
44
  opacity: 1;
45
}
46
47
.title {
48
   -webkit-transition:1s;
49
  width: 0%;
50
  height: 0px;
51
  opacity: 0;
52
}
53
54
      .button {
55
        color:#fff;
56
        text-decoration:none;
57
          border-top:1px solid #fff;
58
          text-align:center;
59
          text-transform:uppercase;
60
          width:100%;
61
          padding:1.2em;
62
        }
63
64
          .button:hover {
65
          cursor:pointer;
66
          background:rgba(0,132,255,0.15);
67
              }
68
69
 
70
h1 {
71
  width:100%;
72
  color:rgba(188, 230, 255, 0.2);
73
  text-align:center;
74
  text-transform:uppercase;
75
  text-shadow: 1px 3px 6px #E5F2FF,
76
                0 0 0 #47a0d3,
77
              1px 4px 6px #E5F2FF;
78
  font-weight:lighter;
79
  font-size:2.5em;
80
  position:absolute;
81
  margin-top:20%;
82
}
 

Dropdown menu

CSSDeck G+