[英]CSS slide bottom border on click
How to slide the bottom border of a menu item on click of that item. 单击时如何滑动菜单项的底部边框。
Here is my code 这是我的代码
HTML - 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 - JS-
$(document).ready(function(){
$(".menu-item").on("click", function(e) {
$(".menu-item").removeClass("active");
console.log("yo");
$(this).addClass("active");
});
});
Working demo here - FIDDLE 在这里工作演示-FIDDLE
So initially the "menu1" has the bottom border. 因此,最初“ menu1”具有底部边框。 When I click on "menu2" how can I SLIDE(animate) the bottom border from "menu1" to "menu2"?
当我单击“菜单2”时,如何从“菜单1”到“菜单2”滑动(动画)底部边框?
NOTE - 注意 -
Here is a sample demo of of the intended functionality - DEMO 这是预期功能的示例演示-DEMO
But the above demo is implemented using jQuery. 但是上面的演示是使用jQuery实现的。 I am looking for a pure CSS solution.
我正在寻找一个纯CSS解决方案。
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 我对此进行了研究,可惜的是我无法通过纯CSS(具有动态元素和动态宽度)来做到这一点,为此我最终创建了一个jQuery插件与CSS混合,这是我的jQuery插件
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: 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/ 在https://jsfiddle.net/czf9kjfd/上尝试
Here is the 'pure' css version which accept only fixed number of items and toggle the active
class by jQuery 这是“纯” css版本,仅接受固定数量的项目,并通过jQuery切换
active
类
CSS: 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/ 尝试: https : //jsfiddle.net/yqpnckw4/1/
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.
您可以为每个元素创建一个类似于底边框的元素,并为其宽度或位置设置动画。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.