Slide panel

Slide Panel

HTML

<div class="container">
    <div class="main">
        <h1>Click to toggle</h1>
    </div>
    
    <div class="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li id="mani"><a href="#">Contact us</a></li>
        </ul>
    </div>
</div>

CSS

div{
 
}
.container{
    position :relative;
    width : 300px;
    height: 400px;
    z-index:9999;
      border : 1px solid;
}
.main{
   position : absolute;
   
    right :0;
   top:0;
   background-color : wheat; 
   
    width:inherit;
    height:inherit;
    z-index : 999;
    -webkit-transition: all 0.3s;
}
.main-slide{
  -webkit-transition: all 0.3s; 
    width : 200px;
    opacity : 0.8;
}

.sidebar{
    position:absolute;
    left :0;
    top:0;
    background-color :#f5f5f5;
    width: 100px;
    height:inherit;
    z-index : 888;
}
ul{
    padding:0 5px 0 5px;
}
li{
    
    padding :1px;
    border:1px solid;
    list-style : none;
}

JavaScript

$(function(){
    $(".main").click(function(){
    $(".main").addClass("main-slide");
    });
});

$('#mani').click(function(){
 $(".main").removeClass("main-slide");
})