CSS滑动底部边框点击

CSS slide bottom border on click

本文关键字：边框 底部 CSS      更新时间：2023-09-26

如何在单击菜单项时滑动该菜单项的底部边框。

我的代码

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");
      });
});

工作演示在这里- FIDDLE

所以最初的"menu1"有底部边框。当我点击"menu2"我怎么能滑动(动画)底部边界从"menu1"到"menu2"?

注意:

下面是预期功能的示例演示- demo

但是上面的演示是使用jQuery实现的。我正在寻找一个纯CSS解决方案。

我对此做了研究，遗憾的是我不能通过纯css(动态元素和动态宽度)做到这一点，我最终创建了一个jQuery插件，用于这个目的与css混合，这是我的jQuery插件

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;
        }

试试https://jsfiddle.net/czf9kjfd/

Edit 1—

这是"纯"css版本，只接受固定数量的项目，并通过jQuery切换active类

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;
}

试穿:https://jsfiddle.net/yqpnckw4/1/

你不能通过动画边框来获得你想要的效果。您可以为每个元素创建一个类似于底部边框的元素，并为其宽度或位置设置动画。

相关文章：