Php Açılır KAPANIR Yan menü

16.03.2019 11:53

wedatozer WM Aracı Kullanıcı

Üyelik 24.06.2014
Yaş/Cinsiyet 38 / E
Meslek muhasebe
Konum Yozgat

Ad Soyad V** Ö**
Mesajlar 34
Beğeniler 10 / 4
Ticaret 0, (%0)

merhabalar ekteki resimdeki gibi sağda açılan yan bilgi menüsü nasıl yapabiliriz? bugun için bir kod mevcutmudur? yardımlarınız için teşekkürler saygılar

16.03.2019 12:01

#2

nozver WM Aracı Kullanıcı

Üyelik 12.01.2019
Yaş/Cinsiyet 31 / E
Meslek Öğrenci
Konum Tekirdağ

Ad Soyad N** Ö**
Mesajlar 271
Beğeniler 36 / 81
Ticaret 0, (%0)

hocam bunu phpyle yapabilir misiniz bilmiyorum ama javascript, jquery gibi bir dille yapılır toggle ile position absolute olan bir kutuyu acip kapatacaksınız sitenize entegre edebilirsiniz iyi çalışmalar

16.03.2019 12:11

#3

wedatozer WM Aracı Kullanıcı

Üyelik 24.06.2014
Yaş/Cinsiyet 38 / E
Meslek muhasebe
Konum Yozgat

Ad Soyad V** Ö**
Mesajlar 34
Beğeniler 10 / 4
Ticaret 0, (%0)

PEKİ VARMI elınızde java, jquery , gibi hazır bır kod ? yardımcı olabileceginiz. zaten ben orda php siteme eklemek istediğimi söylemek istemiştim. saygılar

17.03.2019 01:05

#4

emrecanoztas Ninja Yazılımcı Kullanıcı

Üyelik 24.11.2018
Yaş/Cinsiyet 35 / E
Meslek Freelance Full Stack Developer
Konum Ankara

Ad Soyad E** Ö**
Mesajlar 21
Beğeniler 1 / 10
Ticaret 0, (%0)

İlgili açılır panel (sidebar), vanilla css ile yazılabileceği gibi; JavaScript ile de yazılabilinir. https://github.com/oztasemrecan/css-sidebars adresinde, hazırlanmış çeşitli sidebar'lar mevcut. Üzerinde değişiklikler yaparak; istediğiniz sidebar'ı kolaylıkla elde edebilirsiniz.

İyi çalışmalar, kolay gelsin..!

http://emrecanoztas.com/

17.03.2019 23:53

#5

wedatozer WM Aracı Kullanıcı

Üyelik 24.06.2014
Yaş/Cinsiyet 38 / E
Meslek muhasebe
Konum Yozgat

Ad Soyad V** Ö**
Mesajlar 34
Beğeniler 10 / 4
Ticaret 0, (%0)

Emrecanoztas tşkler php index dosyama editleyip koymaya çalışacağım :) becerebilirsem tşkler ilgin için

18.03.2019 00:12

#6

SefaCanDemir Front-End Developer Kullanıcı

Üyelik 10.11.2013
Yaş/Cinsiyet 27 / E
Meslek Front-End Developer
Konum Adana

Ad Soyad S** D**
Mesajlar 1345
Beğeniler 234 / 472
Ticaret 12, (%100)

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 :)

2 kişi bu mesajı beğendi.

sefacandemir.com.tr

18.03.2019 02:51

#7

wedatozer WM Aracı Kullanıcı

Üyelik 24.06.2014
Yaş/Cinsiyet 38 / E
Meslek muhasebe
Konum Yozgat

Ad Soyad V** Ö**
Mesajlar 34
Beğeniler 10 / 4
Ticaret 0, (%0)

bu ne anlatım ve uygulamadır Sefacan kardes :D harika bir şey ama... ben beceremem hehehe :D ama dehşet hazırlamışsın ellerine sağlık becerebilen arkadaşların işine yarayacak sayende çok saol

19.03.2019 12:52

#8

SefaCanDemir Front-End Developer Kullanıcı

Üyelik 10.11.2013
Yaş/Cinsiyet 27 / E
Meslek Front-End Developer
Konum Adana

Ad Soyad S** D**
Mesajlar 1345
Beğeniler 234 / 472
Ticaret 12, (%100)

wedatozer Rica ederim, çok zor bir şey değil aslında. Biraz kurcalayın yapabilirsiniz :)

1 kişi bu mesajı beğendi.

sefacandemir.com.tr

19.03.2019 16:15

#9

HakanKorkz WM Aracı Kullanıcı

Üyelik 07.03.2018
Yaş/Cinsiyet 27 / E
Meslek Mesleğim yok
Konum Sakarya

Ad Soyad H** K**
Mesajlar 250
Beğeniler 54 / 66
Ticaret 2, (%100)

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 :)

Üstadım eline sağlık ben de css jugery öğrenmek istiyorum sen ders felan veriyormusun acaba bir platform da

1 kişi bu mesajı beğendi.

https://hakankorkmaz.site

21.03.2019 22:17

#10

wedatozer WM Aracı Kullanıcı

Üyelik 24.06.2014
Yaş/Cinsiyet 38 / E
Meslek muhasebe
Konum Yozgat

Ad Soyad V** Ö**
Mesajlar 34
Beğeniler 10 / 4
Ticaret 0, (%0)

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 :)

hallettim gibi :)

Php Açılır KAPANIR Yan menü

Üye Girişi Yap