Check out This Simple Tab Animation Developed by Saijo George .
animated tab
HTML
[code language=”html”]
<ul class="tab-menu">
<li class="active"><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
[/code]
CSS / Less
[code language=”css”]
@import url(https://fonts.googleapis.com/css?family=Lato:400,500);
body {
font-family: ‘Lato’;
text-align: center;
}
ul {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
margin: 100px;
background-color: #222;
font-weight: 500;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
li {
display: block;
float: left;
position: relative;
margin: 2px;
transition:.65s;
&.active {
background-color: #fff;
a, a:hover, &:focus {
opacity: 1;
color: #222;
}
}
a {
position: relative;
display: block;
padding: 5px 40px;
color: #999;
opacity: .5;
&:hover, &:focus {
text-decoration: none;
color: #999;
opacity: 1;
}
}
}
}
[/code]
JS / Babel
[code language=”js”]
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", function() {
for (var j = 0; j < li.length; j++) {
li[j].removeAttribute("class", "active");
this.setAttribute("class", "active");
}
});
}
[/code]
