Fluid tab active state

fluid-tab-active-state.markdown

Fluid tab active state

From: https://dribbble.com/shots/2561589-Tabs

A Pen by Aaron Iker on CodePen.

License.

DEMO https://codemyui.com/?p=29918

index.html

<nav>
  <ul>
    <li class="active"><a href="">First</a></li>
    <li><a href="">Second</a></li>
    <li><a href="">Third</a></li>
  </ul>
</nav>

script.js

var nav = $('nav');
var line = $('<div />').addClass('line');

line.appendTo(nav);

var active = nav.find('.active');
var pos = 0;
var wid = 0;

if(active.length) {
  pos = active.position().left;
  wid = active.width();
  line.css({
    left: pos,
    width: wid
  });
}

nav.find('ul li a').click(function(e) {
  e.preventDefault();
  if(!$(this).parent().hasClass('active') && !nav.hasClass('animate')) {
    
    nav.addClass('animate');

    var _this = $(this);

    nav.find('ul li').removeClass('active');

    var position = _this.parent().position();
    var width = _this.parent().width();

    if(position.left >= pos) {
      line.animate({
        width: ((position.left - pos) + width)
      }, 300, function() {
        line.animate({
          width: width,
          left: position.left
        }, 150, function() {
          nav.removeClass('animate');
        });
        _this.parent().addClass('active');
      });
    } else {
      line.animate({
        left: position.left,
        width: ((pos - position.left) + wid)
      }, 300, function() {
        line.animate({
          width: width
        }, 150, function() {
          nav.removeClass('animate');
        });
        _this.parent().addClass('active');
      });
    }

    pos = position.left;
    wid = width;
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

*
  box-sizing: border-box

body
  background: #1A1E23
  font-family: 'Lato', sans-serif
  -webkit-font-smoothing: antialiased

nav
  position: relative
  padding-bottom: 12px
  .line
    height: 2px
    position: absolute
    bottom: 0
    margin: 10px 0 0 0
    background: #FF1847
  ul
    padding: 0
    margin: 0
    list-style: none
    display: flex
    li
      margin: 0 40px 0 0
      opacity: .4
      transition: all 0.4s ease
      &:hover
        opacity: .7
      &.active
        opacity: 1
      &:last-child
        margin-right: 0
      a
        text-decoration: none
        color: #fff
        text-transform: uppercase
        display: block
        font-weight: 600
        letter-spacing: .2em
        font-size: 14px
        
//Center
body
  display: flex
  justify-content: center
  align-items: center
  min-height: 100vh

styles

<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet" />