CSS slide bottom border on click

Question

How to slide the bottom border of a menu item on click of that item.

Here is my code

HTML -

<div class="menu">
    <div class="menu-item active">menu 1</div>
    <div class="menu-item">menu 2</div>
    <div class="menu-item">menu 3</div>
  </div>

LESS -

 .menu-item {
      float: left;
      border-bottom: 2px solid grey;
      margin: 0 10px;
    padding: 0 10px;
      cursor: pointer;

  &.active {
    border-color: blue;
  }
}

JS -

$(document).ready(function(){
    $(".menu-item").on("click", function(e) {
      $(".menu-item").removeClass("active");
        console.log("yo");
        $(this).addClass("active");
      });
});

Working demo here - FIDDLE

So initially the "menu1" has the bottom border. When I click on "menu2" how can I SLIDE(animate) the bottom border from "menu1" to "menu2"?

NOTE -

Here is a sample demo of of the intended functionality - DEMO

But the above demo is implemented using jQuery. I am looking for a pure CSS solution.

Answer 1

I did a research for this, and the shame is I cannot do it via pure css (with dynamic elements and dynamic width), I finally created a jQuery plugin for this purpose mix with css, here is my jQuery plugin

jQuery:

$.fn.RegisterTabBar = function (id) {
    var $ele = $(this);
    if ($ele.prop("tagName") && $ele.prop("tagName").toLowerCase() == "ul" && id != undefined) {
        $ele.attr("data-style-id", id);
        $("<style type='text/css'></style>").attr("id", id).appendTo($("body"));
        $ele.find("li").on("click", function () {
            var $li = $(this),
                CurrentIndex = $ele.find(".active").removeClass("active").index(),
                ClickedIndex = $li.addClass("active").index();

            function SetStyle($ele, $li, IsToLeft) {
                var ID = $ele.attr("data-style-id");
                if (ID == undefined) return;
                if ($ele.width() <= 0) {
                    setTimeout(function () { SetStyle($ele, $li, IsToLeft); }, 100);
                    return;
                }

                $("style#" + ID).text(
                    "ul[data-style-id='" + ID + "']:before { " +
                        "left: " + $li.position().left + "px; " +
                        "right: " + ($ele.width() - $li.position().left - $li.outerWidth()) + "px; " +
                        "-webkit-transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                        "transition: left " + (IsToLeft ? ".45s" : ".8s") + ", right " + (IsToLeft ? ".9s" : ".3s") + "; " +
                    "} "
                );
            }
            SetStyle($ele, $li, ClickedIndex < CurrentIndex);
        });
    }
    return $ele;
}

CSS:

ul.tab-bar,
ul.tab-bar>li { position: relative; }
    ul.tab-bar.bar-style-1:before { background-color: #00668f; } /* Color of the bar*/
    ul.tab-bar:before {
        display: inline-block;
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        height: 3px;
        z-index: 1;
    }
    ul.tab-bar>li { list-style-type: none; border-width: 0; }
    ul.tab-bar.bar-style-1>li.active { color: #00668f; font-weight: 700; }
    li {
            list-style-type: none;
            display: inline-block;
            border-width: 0;
            height: 40px;
            margin: 0 20px;
            background-color: transparent;
            color: #9c9c9c;
            text-align: center;
            cursor: pointer;
        }

try it on https://jsfiddle.net/czf9kjfd/

Edit 1 --

Here is the 'pure' css version which accept only fixed number of items and toggle the active class by jQuery

CSS:

ul li {
  display: inline-block;
    font-weight: bold;
    width: 30%;
    padding: 7px 0;
    text-align: center;
    cursor: pointer;
  list-style-type: none;
}
ul li:last-child {
  margin: 0;
  padding: 0;
    height: 7px;
    background: #00b6ff;
  float: left;
}

ul li.active:nth-child(1) ~ li:last-child,
ul li:nth-child(1):hover ~ li:last-child {
    margin-left: 0%;
}

ul li.active:nth-child(2) ~ li:last-child,
ul li:nth-child(2):hover ~ li:last-child {
    margin-left: 30%;
}

ul li.active:nth-child(3) ~ li:last-child,
ul li:nth-child(3):hover ~ li:last-child {
    margin-left: 60%;
}

li:last-child {
    -webkit-transition: margin-left 0.2s ease;
    -moz-transition: margin-left 0.2s ease;
    -o-transition: margin-left 0.2s ease;
    transition: margin-left 0.2s ease;
    position: relative;
}

Try on: https://jsfiddle.net/yqpnckw4/1/

Answer 2

You can't animate borders to get the effect you want. You could create an element that resembles a bottom border for each element and animate its width or position.