Edit: Anlatımı pek beceremem, ki beceremedim de o nedenle sizin için bir örnek yazdım :)

Örnek:

eXKNGd


Anlatım:

Her hangi bir div oluşturun ve bir id tanımlayın. İçeriğini istediğiniz şekilde tasarlayın. Ve bu dive bir sınıf tanımlayın. Tanımladığınız sınıfa aşağıdaki css kodlarını yapıştırın;

width: size kalmış;
height: size kalmış;
position:fixed;
top:50%;
right:0;
padding:size kalmış;
transform:translate(100%,-50%);
transition: transform .4s linear;


Tanımladığınız sınıfı 'ornek' olarak ele alıyorum aşağıdaki kodda sadece ornek sınıfını kendi sınıf isminiz ile değiştirin;


ornek.active{
transform:translate(0,-50%);
}


Daha sonra oluşturduğunuz div içine bir a elementi oluşturun. Ve onun css sınıfına ise;


position: absolute;
top: 50%;
left: -10px;
transform: translateY(-50%);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(17,17,17,0.9);


yazın.

Jquery tanımlı değilse html sayfanızda yer alan script taglerinin en üstüne
<script> integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script> ekleyin.

A elementinize bir id tanımlayın ve aşağıdaki kodda sadece a elementinizin id si ile div elementinizin id sini değiştirin.


$('#a_id').click(function(){
$('#div_id').toggleClass('active');
});;



Hepsi bu kadar :) Sağdan sola açılan bir side_card sahibisiniz :)