left menu bar active and left to right slider animation

Question

I have one request. I am making one menu bar. Can anyone make this function so when we click on a link it is added to the active class with the slide animation back red color left to right?

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>

This is the full HTML and CSS code link: Jsfiddle

Answer 1

by using jQuery try this

$(function(){

    $('.leftNav a').click(function(e){

        $(this).parent().addClass('active').siblings().removeClass('active');

    });

});

add this 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