Ajax Loader
×
HTML 
<div class="wrap">
1
<div class="wrap">
2
3
  <ul class="tabs group">
4
    <li><a class="active" href="#/one">Light &</a></li>
5
    <li><a href="#/two">Sexy</a></li>
6
    <li><a href="#/three">Tabs</a></li>
7
  </ul>
8
9
  <div id="content">
10
    <p id="one">Some text about Light sit amet, consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur </p>
11
    <p id="two">Sexy sexy  consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur modi quod quo iureq</p>
12
    <p id="three">Tabs , consectetur adipisicing elit. Pariatur modi quod quo iure recusandae eligendi q.t, consectetur adipisicing elit. Pariatur modi quod quo iureq</p>
13
  </div>
14
15
</div>
 
CSS 
 
1
 
2
 
3
body {
4
    overflow-y: scroll;
5
6
}
7
.wrap {
8
  margin: 0 auto;
9
}
10
ul.tabs {
11
  width: 390px;
12
  height: 80px;
13
  margin: 0 auto;
14
  list-style: none;
15
  overflow: hidden;
16
  padding: 0;
17
}
18
ul.tabs li {
19
  float: left;
20
  width: 130px;
21
 
22
23
}
24
ul.tabs li a {
25
  position: relative;
26
  display: block;
27
  height: 30px;
28
  margin-top: 40px;
29
  padding: 10px 0 0 0;
30
  font-family: 'Open Sans', sans-serif;
31
  font-size: 18px;
32
  text-align: center;
33
  text-decoration: none;
34
  color: #ffffff;
35
  background: #6edeef;
36
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
37
     -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
38
          box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
39
            border: 0px solid #000000;
40
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
41
       -moz-transition: padding 0.2s ease, margin 0.2s ease;
42
         -o-transition: padding 0.2s ease, margin 0.2s ease;
43
        -ms-transition: padding 0.2s ease, margin 0.2s ease;
44
            transition: padding 0.2s ease, margin 0.2s ease;
45
}
46
.tabs li:first-child a {
47
  z-index: 3;
48
border-top-left-radius: 8px;
49
}
50
.tabs li:nth-child(2) a {
51
  z-index: 2;
52
}
53
.tabs li:last-child a {
54
  z-index: 1;
55
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
56
     -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
57
          box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
58
  -webkit-border-top-right-radius: 8px;
59
border-top-right-radius: 8px;
60
}
61
ul.tabs li a:hover {
62
  margin: 35px 0 0 0;
63
  padding: 10px 0 5px 0;
64
}
65
ul.tabs li a.active {
66
  margin: 30px 0 0 0;
67
  padding: 10px 0 10px 0;
68
  background: #545f60;
69
  color: #6edeef;
70
  /*color: #ff6831;*/
71
  z-index: 4;
72
  outline: none;
73
}
74
.group:before,
75
.group:after {
76
    content: " "; /* 1 */
77
    display: table; /* 2 */
78
}
79
.group:after {
80
    clear: both;
81
}
82
#content {
83
  width: 390px;
84
  height: 200px;
85
  margin: 0 auto;
86
  background: #545f60;
87
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
88
       -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
89
            box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
90
  -webkit-border-bottom-right-radius: 8px;
91
-webkit-border-bottom-left-radius: 8px;
92
 
93
border-bottom-right-radius: 8px;
94
border-bottom-left-radius: 8px;
95
}
96
p{
97
  font-family: 'Open Sans', sans-serif;
98
  padding: 30px 40px;
99
  color: #ffffff;
100
  line-height: 26px;
101
  font-size: 18px;
102
  margin: 0;
103
}
104
#one {
105
106
}
107
#two {
108
109
}
110
#three {
111
112
}
 
JavaScript 
(function($) {
1
(function($) {
2
 
3
  var tabs =  $(".tabs li a");
4
5
  tabs.click(function() {
6
    var content = this.hash.replace('/','');
7
    tabs.removeClass("active");
8
    $(this).addClass("active");
9
    $("#content > p").hide();
10
    $(content).fadeIn(200);
11
  });
12
 
13
})(jQuery);
 

Untitled

CSSDeck G+