左菜单栏活动和从左到右滑块动画

left menu bar active and left to right slider animation

本文关键字：动画 从左到右 菜单栏 活动      更新时间：2023-09-26

我有一个请求。我正在制作一个菜单栏。有人能让这个函数，所以当我们点击一个链接，它被添加到活动类与幻灯片动画回到红色从左到右吗?

HTML代码: 
<aside class="leftNav">
  <ul>
   <li><a href="#">Menu Bar 1</a></li>
   <li><a href="#">Menu Bar 2</a></li>
   <li class="active"><a href="#">Menu Bar 3</a></li>
   <li><a href="#">Menu Bar 4</a></li>
   <li><a href="#">Menu Bar 5</a></li>
 </ul>
</aside>
这是完整的HTML和CSS代码链接:Jsfiddle

使用jQuery试试这个

$(function(){
    $('.leftNav a').click(function(e){
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

添加CSS

.leftNav{ float: left; margin: 0; padding: 0; width: 100%;}
.leftNav ul{}
.leftNav ul li{ border-left: solid 6px #cfcfcf; margin-top: 2px; }
.leftNav ul li:first-child{margin-top: 0;}
.leftNav ul li:hover{border-left: solid 6px #771421;}
.leftNav ul li a{ position: relative; display: block; padding: 11px 10px 11px 20px; color: #15151c; font-size: 18px; }
.leftNav ul li a:hover, .leftNav ul li a.active{text-decoration: none;}
.leftNav ul li.active{border-left: solid 6px #771421;}
.leftNav ul li.active a{text-decoration: none; color: #fff; font-size:24px; padding: 8px 10px 8px 20px; /* background-color: #771421; */}
.leftNav ul li a,
.leftNav ul li.active a:before,
.leftNav ul li.active{
  transition: all 0.3s ease-in-out;
}
.leftNav ul li a:before{
  content: "";
  position: absolute;
  display: block;
  background: red;
  width: 0%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.leftNav ul li.active a:before{
  width: 100%;
}

参见工作演示

相关文章：