taufeeq

Active animation

by taufeeq zaman

HTML

<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>


</ul>

CSS

a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  position: relative;
  line-height: 40px;
  float: left;
  margin-right: -1px;
  padding: 0 15px;
}

li {
  display: block;
  color: blue;
  text-align: center;
}

a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);
  -ms-transform: skew(-15deg, 0);
  -webkit-transform: skew(-15deg, 0);
  
}

li:hover a:before {
  background: green;
}

li:hover a {
  color: #aaa;
}

li a.selected:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);
  -ms-transform: skew(-15deg, 0);
  -webkit-transform: skew(-15deg, 0);

}

.selected a {
  color: #fff;

}

.selected {
  background-color: #10acdf;
}

ul {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  display: -webkit-inline-box;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}

JavaScript 1.7

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});