Question

我有一个请求。我正在制作一个菜单栏。任何人都可以使用这个功能，所以当我们点击一个链接时，它会被添加到活动类中，幻灯片动画从左到右呈红色？

HTML code：

<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

Answer 1

使用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%;
}

SEE WORKING DEMO

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

1 个答案: