Ajax Loader
HTML 
<ul>
1
<ul>
2
  <li>
3
    <a href="#">Movies</a>
4
    <ul>
5
      <li>The Departed</li>
6
      <li>Sherlock Holmes</li>
7
      <li>Sin City</li>
8
      <li>Jarhead</li>
9
      <li>Jurassic Park</li>
10
      <li>Machete</li>
11
    </ul>
12
  </li>
13
  <li>
14
    <a href="#">TV shows</a>
15
    <ul>
16
      <li>Dexter</li>
17
      <li>Mad Men</li>
18
      <li>Breaking Bad</li>
19
      <li>Fringe</li>
20
      <li>Game of Thrones</li>
21
      <li>Californication</li>
22
      <li>Homeland</li>
23
      <li>Boardwalk Empire</li>
24
    </ul>
25
  </li>
26
  <li>
27
    <a href="#">Music</a>
28
    <ul>
29
      <li>B.B. King</li>
30
      <li>Howlin' Wolf</li>
31
      <li>Aretha Franklin</li>
32
      <li>John Lee Hooker</li>
33
      <li>Tom Waits</li>
34
      <li>Jimi Hendrix</li>
35
      <li>Muddy Waters</li>
36
      <li>James Brown</li>
37
      <li>Chuck Berry</li>
38
    </ul>
39
  </li>
40
  <li>
41
    <a href="#">Games</a>
42
    <ul>
43
      <li>Grand Theft Auto</li>
44
      <li>Half-Life</li>
45
      <li>Super Mario Galaxy</li>
46
      <li>Resident Evil</li>
47
    </ul>
48
  </li>
49
</ul>
50
 
51
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
html {
1
html {
2
  overflow-y: scroll;
3
}
4
body {
5
  font: normal normal 90% sans-serif;
6
  max-width: 200px;
7
  margin: 100px auto 50px auto;
8
  background: #1f1f1f;
9
  text-align: center;
10
}
11
 
12
ul {
13
  list-style: none;
14
  margin: 0; padding: 0;
15
  text-align: left;
16
}
17
body > ul {
18
  margin-bottom: 300px;
19
  border: 1px solid #222;
20
  @include box-shadow(0 0 25px #000);
21
}
22
body > ul > li {
23
  position: relative;
24
}
25
body > ul > li > a {
26
  display: block;
27
  outline: 0;
28
  padding: .7em 1em;
29
  text-decoration: none;
30
  color: #fff;
31
  font-weight: bold;
32
  @include text-shadow(#111 0 -1px);
33
  background: #333;
34
  @include box-shadow(inset 0 1px 0 0 rgba(250,250,250,0.1));
35
  @include background-image(linear-gradient(#444, #333));
36
  @include filter-gradient(#444, #333, horizontal);
37
  border-bottom: 1px solid #222;
38
}
39
body > ul > li > ul {
40
  counter-reset: items;
41
  height: 0;
42
  overflow: hidden;
43
  background: #eee;
44
  color: #777;
45
  font-size: .75em;
46
  @include box-shadow(inset 0 0 50px #BBB);
47
}
48
body > ul > li > ul > li {
49
  counter-increment: items;
50
  padding: .5em 1.3em;
51
  border-bottom: 1px dotted #DDD;
52
}
53
body > ul > li > ul:after {
54
  content: counter(items);
55
  font-size: 0.857em;
56
  @include inline-block;
57
  position: absolute;
58
  right: 10px;
59
  top: 15px;
60
  background: #333;
61
  line-height: 1em;
62
  height: 1em;
63
  padding: .7em .8em;
64
  margin: -.8em 0 0 0;
65
  color: white;
66
  text-indent: 0;
67
  text-align: center;
68
  @include text-shadow(0px 1px 0px rgba(0, 0, 0, .5));
69
  font-weight: 500;
70
  @include border-radius(.769em);
71
  @include box-shadow(inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15));
72
}
 
JavaScript 
$(function() {
1
$(function() {
2
3
  $("a").click(function() {
4
    var ul = $(this).next(),
5
        clone = ul.clone().css({"height":"auto"}).appendTo("body"),
6
        height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
7
8
    clone.remove();
9
    ul.animate({"height":height});
10
    return false;
11
  });
12
 
13
});
 

Accordion

CSSDeck G+