Ajax Loader
HTML 
<section id="menu">
1
<section id="menu">
2
  <ul>
3
      <li data-msg="1">
4
          <label for="trabajo">Trabajos</label><input name="radio" type="radio" checked id="trabajo">
5
            <section class="ventana">
6
              <article class="trabajo">Recuerda Asistir a reunión</article>
7
            </section>
8
        </li>
9
        <li data-msg="2">
10
          <label for="email">E-mail</label><input name="radio" type="radio" id="email">
11
            <section class="ventana">
12
              <article class="email">
13
                  <h1>Asunto</h1>
14
                    <h2>contacto[at]dhenriquez.cl</h2>
15
                    <p>Extracto de contenido del email</p>
16
                </article>
17
                <article class="email">
18
                  <h1>Asunto</h1>
19
                    <h2>contacto[at]dhenriquez.cl</h2>
20
                    <p>Extracto de contenido del email</p>
21
                </article>
22
            </section>
23
        </li>
24
        <li data-msg="5">
25
          <label for="amigos">Amigos</label><input name="radio" type="radio" id="amigos">
26
            <section class="ventana">
27
              <article class="amigo">
28
                  <figure class="foto"></figure>
29
                    <h1>Nombre</h1>
30
                    <p>Descripción del usuario</p>
31
                </article>
32
                <article class="amigo">
33
                  <figure class="foto"></figure>
34
                    <h1>Nombre</h1>
35
                    <p>Descripción del usuario</p>
36
                </article>
37
                <article class="amigo">
38
                  <figure class="foto"><img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/174701_139091609448333_1081467231_q.jpg" alt="Foto Amigo"></figure>
39
                    <h1>Nombre</h1>
40
                    <p>Descripción del usuario</p>
41
                </article>
42
                <article class="amigo">
43
                  <figure class="foto"></figure>
44
                    <h1>Nombre</h1>
45
                    <p>Descripción del usuario</p>
46
                </article>
47
                <article class="amigo">
48
                  <figure class="foto"></figure>
49
                    <h1>Nombre</h1>
50
                    <p>Descripción del usuario</p>
51
                </article>
52
            </section>
53
        </li>
54
        <li data-msg="4">
55
          <label for="sms">SMS</label><input name="radio" type="radio" id="sms">
56
            <section class="ventana">
57
        <article class="sms"><a href="http://www.dhenriquez.cl">http://www.dhenriquez.cl</a></article>
58
              <article class="sms">Hola Amor!</article>
59
                <article class="sms">Me Gustan las Ardilla</article>
60
                <article class="sms">Recuerda la cita con el doctor</article>
61
            </section>
62
        </li>
63
    </ul>
64
</section>
 
CSS 
#menu{
1
#menu{
2
  width:400px;
3
  height:40px;
4
  overflow:hidden;
5
  background-image: linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
6
  background-image: -o-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
7
  background-image: -moz-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
8
  background-image: -webkit-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
9
  background-image: -ms-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
10
  background-image: -webkit-gradient(
11
    linear,
12
    left bottom,
13
    left top,
14
    color-stop(0.5, rgb(123,168,55)),
15
    color-stop(0.79, rgb(160,202,83))
16
  );
17
  margin-top:20px;
18
  margin-left:auto;
19
  margin-right:auto;
20
  border-radius:6px;
21
}
22
  #menu ul li:after{
23
     width:10px;
24
     height:10px;
25
     content:attr(data-msg);
26
     position:absolute;
27
     border-radius:50%;
28
     border-top:rgb(123,168,55) 1px solid;
29
     border-bottom:#030 1px solid;
30
     font-size:8px;
31
     text-align:center;
32
     background:#FFF;
33
     padding:5px 5px 5px 5px;
34
     margin-top:-10px;
35
     margin-left:-60px;
36
   }
37
    #menu ul li label{
38
      width:100px;
39
      height:12px;
40
      padding-top:15px;
41
      font-size:12px;
42
      font-weight:bold;
43
      text-align:center;
44
      text-transform:uppercase;
45
      color:#FFF;
46
      float:left;
47
    }
48
    #menu ul li label + input[type=radio]{
49
      display:none;
50
    }
51
    #menu ul li label + input[type=radio]:checked{
52
      display:none;
53
      color:#fff;
54
    }
55
    #menu ul li input[type=radio]:checked + .ventana{
56
      opacity:1;
57
    }
58
    #menu ul li .ventana{
59
      width:398px;
60
      height:auto;
61
      overflow:hidden;
62
      border:#CCC 1px solid;
63
      border-radius:6px;
64
      opacity:0;
65
      -webkit-transition:all .5s ease-in-out;
66
      -moz-transition:all .5s ease-in-out;
67
      -ms-transition:all .5s ease-in-out;
68
      -o-transition:all .5s ease-in-out;
69
      transition:all .5s ease-in-out;
70
      position:absolute;
71
      margin-top:45px;
72
    }
73
    #menu ul li .ventana:first-child{
74
      opacity:1;
75
    }
76
77
    .trabajo{
78
      width:100%;
79
      display:block;
80
      height:auto;
81
      border-bottom:#CCC 1px solid;
82
      padding:10px 10px 10px 30px;
83
      background:url(http://dev.dhenriquez.com/test-img/icons/154-necktie.png) 10px center no-repeat;
84
    }
85
86
    .email{
87
      width:100%;
88
      display:block;
89
      height:auto;
90
      border-bottom:#CCC 1px solid;
91
      padding:10px 10px 10px 35px;
92
      background:url(http://dev.dhenriquez.com/test-img/icons/18-envelope.png) 5px center no-repeat;
93
    }
94
      .email h1{
95
        font-weight:bold;
96
        font-size:12px;
97
      }
98
      .email h2{
99
        font-weight:bold;
100
        font-size:9px;
101
        color:#999;
102
      }
103
      .email p{
104
        font-size:10px;
105
      }
106
107
    .amigo{
108
      width:100%;
109
      display:block;
110
      height:auto;
111
      border-bottom:#CCC 1px solid;
112
      padding:10px 10px 10px 10px;
113
    }
114
      .amigo .foto{
115
        width:30px;
116
        height:30px;
117
        overflow:hidden;
118
        float:left;
119
        margin-right:5px;
120
        background:url(http://dev.dhenriquez.com/test-img/icons/112-group.png) center center no-repeat;
121
      }
122
        .amigo .foto img{
123
          width:30px;
124
          height:auto;
125
        }
126
      .amigo h1{
127
        font-weight:bold;
128
        font-size:12px;
129
      }
130
      .amigo p{
131
        font-size:10px;
132
      }
133
    .sms{
134
      width:100%;
135
      display:block;
136
      height:auto;
137
      border-bottom:#CCC 1px solid;
138
      padding:10px 10px 10px 35px;
139
      background:url(http://dev.dhenriquez.com/test-img/icons/08-chat.png) 5px center no-repeat;
140
    }
141
 
142
/* http://meyerweb.com/eric/tools/css/reset/
143
   v2.0 | 20110126
144
   License: none (public domain)
145
*/
146
 
147
html, body, div, span, applet, object, iframe,
148
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
149
a, abbr, acronym, address, big, cite, code,
150
del, dfn, em, img, ins, kbd, q, s, samp,
151
small, strike, strong, sub, sup, tt, var,
152
b, u, i, center,
153
dl, dt, dd, ol, ul, li,
154
fieldset, form, label, legend,
155
table, caption, tbody, tfoot, thead, tr, th, td,
156
article, aside, canvas, details, embed,
157
figure, figcaption, footer, header, hgroup,
158
menu, nav, output, ruby, section, summary,
159
time, mark, audio, video {
160
  margin: 0;
161
  padding: 0;
162
  border: 0;
163
  font-size: 100%;
164
  font: inherit;
165
  vertical-align: baseline;
166
}
167
/* HTML5 display-role reset for older browsers */
168
article, aside, details, figcaption, figure,
169
footer, header, hgroup, menu, nav, section {
170
  display: block;
171
}
172
body {
173
  line-height: 1;
174
}
175
ol, ul {
176
  list-style: none;
177
}
178
blockquote, q {
179
  quotes: none;
180
}
181
blockquote:before, blockquote:after,
182
q:before, q:after {
183
  content: '';
184
  content: none;
185
}
186
table {
187
  border-collapse: collapse;
188
  border-spacing: 0;
189
}
190
body{
191
  font-family:Verdana, Geneva, sans-serif;
192
}
 

Radio Menu

CSSDeck G+