After conducting thorough research, it turns out that achieving this effect purely with CSS (especially with dynamic elements and width) is challenging. As a solution, I have developed a jQuery plugin that combines both jQuery and CSS to accomplish the desired outcome. Below is a snippet of 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;
}
You can try out the implementation on https://jsfiddle.net/czf9kjfd/
Edit 1 --
For those looking for a 'pure' CSS version that works with a fixed number of items and utilizes jQuery to toggle the active class, here is the CSS implementation:
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;
}
You can experiment with this version on: https://jsfiddle.net/yqpnckw4/1/