Giriş Yap / Kayıt Ol
sosyal.market

WM Aracı'na üyelikler tekrar açıldı! Kayıt olmak için TIKLAYIN!

1Beğeni
  • 1 Yazan SefaCanDemir

Cevap Yaz Favorilerime Ekle
Seçenekler Stil
Geri Git   Forum > > PHP

Php Açılır KAPANIR Yan menü

  #1  
Okunmamış 16 Mart 2019, 11:53
wedatozer Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 24 Haziran 2014
Yaş / Cinsiyet: 32 / Erkek
Meslek: muhasebe
Konum: Yozgat
Ad, Soyad: Ve... Öz...
Mesajlar: 17
Beğeniler: 0 / 0
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

  #2  
Okunmamış 16 Mart 2019, 12:01
Avatar Seçilmemiş
WM Aracı
 
Üyelik Tarihi: 12 Ocak 2019
Yaş / Cinsiyet: 26 / Erkek
Meslek: Öğrenci
Konum: Samsun
Ad, Soyad: Ni... Öz...
Mesajlar: 88
Beğeniler: 25 / 7
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
  #3  
Okunmamış 16 Mart 2019, 12:11
wedatozer Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 24 Haziran 2014
Yaş / Cinsiyet: 32 / Erkek
Meslek: muhasebe
Konum: Yozgat
Ad, Soyad: Ve... Öz...
Mesajlar: 17
Beğeniler: 0 / 0
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
  #4  
Okunmamış 17 Mart 2019, 01:05
emrecanoztas Adlı Üyenin Avatarı
Ninja Yazılımcı
 
Üyelik Tarihi: 24 Kasım 2018
Cinsiyet: Erkek
Konum: Ankara
Ad, Soyad: Em... Öz...
Mesajlar: 6
Beğeniler: 3 / 0
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/
  #5  
Okunmamış 17 Mart 2019, 23:53
wedatozer Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 24 Haziran 2014
Yaş / Cinsiyet: 32 / Erkek
Meslek: muhasebe
Konum: Yozgat
Ad, Soyad: Ve... Öz...
Mesajlar: 17
Beğeniler: 0 / 0
Ticaret: 0, 0%
Emrecanoztas tşkler php index dosyama editleyip koymaya çalışacağım becerebilirsem tşkler ilgin için
  #6  
Okunmamış 18 Mart 2019, 00:12
SefaCanDemir Adlı Üyenin Avatarı
Front-End Developer
 
Üyelik Tarihi: 10 Kasım 2013
Cinsiyet: Erkek
Konum: Adana
Ad, Soyad: Se... De...
Mesajlar: 1.321
Beğeniler: 449 / 227
Ticaret: 10, 100%
Edit: Anlatımı pek beceremem, ki beceremedim de o nedenle sizin için bir örnek yazdım

Örnek:




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;

HTML Kodu:
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;

HTML Kodu:
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;

HTML Kodu:
    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
HTML Kodu:
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
  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.

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

Hepsi bu kadar Sağdan sola açılan bir side_card sahibisiniz
Browland bunu beğendi.
Konu SefaCanDemir tarafından (18 Mart 2019, 00:31 ) değiştirilmiştir.
  #7  
Okunmamış 18 Mart 2019, 02:51
wedatozer Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 24 Haziran 2014
Yaş / Cinsiyet: 32 / Erkek
Meslek: muhasebe
Konum: Yozgat
Ad, Soyad: Ve... Öz...
Mesajlar: 17
Beğeniler: 0 / 0
Ticaret: 0, 0%
bu ne anlatım ve uygulamadır Sefacan kardes harika bir şey ama... ben beceremem hehehe ama dehşet hazırlamışsın ellerine sağlık becerebilen arkadaşların işine yarayacak sayende çok saol
  #8  
Okunmamış Dün, 12:52
SefaCanDemir Adlı Üyenin Avatarı
Front-End Developer
 
Üyelik Tarihi: 10 Kasım 2013
Cinsiyet: Erkek
Konum: Adana
Ad, Soyad: Se... De...
Mesajlar: 1.321
Beğeniler: 449 / 227
Ticaret: 10, 100%
wedatozer Rica ederim, çok zor bir şey değil aslında. Biraz kurcalayın yapabilirsiniz
  #9  
Okunmamış Dün, 16:15
HakanKorkz Adlı Üyenin Avatarı
WM Aracı
 
Üyelik Tarihi: 07 Mart 2018
Yaş / Cinsiyet: 21 / Erkek
Meslek: Mesleğim yok
Konum: Sakarya
Ad, Soyad: Ha... Ko...
Mesajlar: 16
Beğeniler: 2 / 1
Ticaret: 0, 0%
Alıntı:
SefaCanDemir Adlı Üyeden Alıntı
Edit: Anlatımı pek beceremem, ki beceremedim de o nedenle sizin için bir örnek yazdım

Örnek:




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;

HTML Kodu:
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;

HTML Kodu:
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;

HTML Kodu:
    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
HTML Kodu:
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
  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.

HTML Kodu:
$('#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
Cevap Yaz Favorilerime Ekle


Konuyu toplam 1 kişi okuyor. (0 üye ve 1 Ziyaretçi)
 
Seçenekler
Stil
Normal Normal

Geri Git   Forum > PHP


Yetkileriniz
Konu açma yetkiniz: Yok
Cevap Yazma Yetkiniz Yok
Eklenti yükleme yetkiniz: Yok
Mesajınızı değiştirme yetkiniz: Yok

BB code: Açık
İfadeler: Açık
[IMG] Kodları: Açık
HTML kodu: Kapalı




Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şu anki Zaman: 10:47.