Nav bar #1

by Trina Lu

HTML

<script src="https://use.fontawesome.com/8a5a0d373e.js"></script>
<ul>
  <li class="social-btn-wrapper">
    <div class="social-btn" id="fb"></div>
  </li>
  <li class="social-btn-wrapper active">
    <div class="social-btn" id="twitter"></div>
  </li>
  <li class="social-btn-wrapper">
    <div class="social-btn" id="github"></div>
  </li>
  <li class="social-btn-wrapper">
    <div class="social-btn" id="rss"></div>
  </li>
</ul>

CSS

ul {
  background:#525252;
  padding: 20px;
}
li{
  display:inline-block;
  cursor:pointer;
}
.social-btn-wrapper {
  width: 20px;
  height: 20px;
  padding: 10px;
  overflow: hidden;
  position: relative;
  font-size: 20px;
}

.social-btn {
  transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
  height: 100%;
  position: relative;
}

.social-btn:before,
.social-btn:after {
  font-family: FontAwesome;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  display: block;
}

.social-btn:before {
  color: #7f8c88;
  top: 0;
}

.social-btn:after {
  color: #00ca93;
  top: 200%;
}

.social-btn-wrapper.active .social-btn,
.social-btn-wrapper:hover .social-btn {
  transform: translateY(-200%);
}

/* icons */

#fb:before,#fb:after {
  content: "\f082";
}
#twitter:before,#twitter:after {
  content: "\f099";
}
#github:before,#github:after {
  content: "\f09b";
}
#rss:before,#rss:after {
  content: "\f09e";
}

JavaScript

var btns = $('.social-btn-wrapper');
btns.click(function(e){
	btns.removeClass('active');
  $(this).addClass('active');
});