Ajax Loader
HTML 
<div class="menu">
1
<div class="menu">
2
  <input type="checkbox" id="menu-collapsed" name="menu-collapsed" />
3
  <div class="menu-content">
4
    <h2>Collapsible menu</h2>
5
    <ul>
6
      <li>lorem ipsum</li>
7
      <li>dolor sit amet</li>
8
      <li>consetetur sadipscing</li>
9
      <li>elitr</li>
10
      <li>sed diam nonumy</li>
11
      <li>eirmod tempor</li>
12
      <li>invidunt ut</li>
13
      <li>labore et dolore</li>
14
    </ul>
15
  </div>
16
  <div class="menu-switch">
17
    <label class="collapse" for="menu-collapsed">«</label>
18
    <label class="rise" for="menu-collapsed">»</label>
19
  </div>
20
</div>
 
CSS 
@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
1
@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
2
@import url('http://fonts.googleapis.com/css?family=Handlee');
3
 
4
html, body {
5
  margin: 0;
6
  padding: 0;
7
  border: 0;
8
  width: 100%;
9
  height: 100%;
10
  overflow: hidden;
11
  background-color: #000;
12
  font-family: 'Open Sans Condensed', sans-serif;
13
  color: rgba(252,251,250,0.9);
14
}
15
.menu {
16
  .menu-content {
17
    -webkit-transition-duration: 1s;
18
    -moz-transition-duration: 1s;
19
    -ms-transition-duration: 1s;
20
    -o-transition-duration: 1s;
21
    transition-duration: 1s;
22
    float: left;
23
    width: 12em;
24
    h2 {
25
      font-family: 'Handlee', cursive;
26
      font-weight: normal;
27
      margin-left: 1em;
28
    }
29
    ul {
30
      list-style: none;
31
    }
32
  }
33
  li, label  {
34
    color: rgba(252,251,250,0.5);
35
    cursor: pointer;
36
    -webkit-transition-duration: 1.0s;
37
    -moz-transition-duration: 1.0s;
38
    -ms-transition-duration: 1.0s;
39
    -o-transition-duration: 1.0s;
40
    transition-duration: 1.0s;
41
    &:hover {
42
      -webkit-transition-duration: 0.3s;
43
      -moz-transition-duration: 0.3s;
44
      -ms-transition-duration: 0.3s;
45
      -o-transition-duration: 0.3s;
46
      transition-duration: 0.3s;
47
      color: rgba(252,251,250,0.9);
48
    }
49
  }
50
  .menu-switch {
51
    padding-top: 6em;
52
    label {
53
      font-size: 3em;
54
      font-family: 'Open Sans Condensed', sans-serif;
55
    }
56
  }
57
  input {
58
    display: none;
59
  }
60
  #menu-collapsed{
61
    &:checked{
62
      ~ .menu-content {
63
        margin-left: -12em;
64
      }
65
      ~ .menu-switch .rise {
66
        display:block;
67
      }
68
      ~ .menu-switch .collapse {
69
        display:none;
70
      }
71
    }
72
    ~ .menu-switch .rise {
73
      display:none;
74
    }
75
  }
76
}
 

CSS only collapsible menu

CSSDeck G+