SefaCanDemir adlı üyeden alıntı
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 :)
işin doğrusu css dekileri sytle.css dosyama ekledim html dosyalarını index dosyama entegre ettim ancak örnek verdiğiniz "js" deki "$('#card_trigger').click(function(){
$('#side_card').toggleClass('active');
});; "
burayı nereye ekleyecegım ? saygılar
