PageSlide.js

0
147
views

page
Evet sayın seyirciler bu aralar spikerliğe soyunduğum için bu kelimeyi çok sık kullanıyorum. Eh işte biraz can sıkıntısı biraz da konuya nasıl başlayacağıma bir türlü karar verememe gibi durumlar yüzünden ‘evet sayın seyirciler’ diye konuya başlamak benim için oldukça kolay oluyor. Facebook sitesinin cep telefonları için hazırladığı uygulama ve bunun gibi birçok sosyal ağ sitesi için de ilham kaynağı olan sayfayı soldan sağa ve sağdan sola kaydırarak sayfada gizlenmiş olan bölümleri gösterme özelliğini birazcık da olsa ya duymuşsunuzdur ya da görmüşsünüzdür. Bu günkü sizlere paylaşmak istediğim jQuery eklentisi tamda bu tür tasarımlar hazırlamanızı kolaylaştıran nadide örneklerden biridir.

Gelelim her eve lazım ve bir o kadar da faydalı uygulamamızın maharetlerine. Sitemizin sürekli takipçilerinden iseniz çok daha önceden paylaşmış olduğumuz Sidr isimli uygulamayı da görmüşsünüzdür mutlaka. Birbirlerinin kopyası desem doğru olmaz sonuçta ikisi de Facebook uygulama örneğinden esinlenerek geliştirilmiş ve  aşağı yukarı aynı görevleri görüyorlar. Her ikisinde de sağ ve sol tarafta tıklandığında kayan paneller var ve her ikisinde de başka bir sayfayı tıklandığında sağ veya sol panel içinde açma özelliği var. Ayrıca her ikisi de responsive yani esnek menüler tasarlamak için kullanılabilir.

Menü örneği normal tarayıcıda üst menü şeklinde görünüyor ve tarayıcıyı küçülttüğünüz an linklerin başlıkları kaybolup yerine küçük kategori sembolü geliyor. Kategori sembolüne (? buna benzer bir şey işte) tıkladığınızda ise sol taraftan panel sağa doğru kayıyor. Anlayacağınız mobil uygulama veya site tasarımlarınızda en çok ihtiyaç duyacağınız jQuery eklentilerinden biridir bu da. Bu yüzden hemen indirin ve arşivinizden eksik etmeyin.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

 JavaScript kodu : 

Sol tarafta açılan ve başka bir sayfayı çağıran kod :

Sağ tarafta açılan modal :

 Css kodu :

  •  Body etiketleri arasına eklemeniz gereken bölümler.

Html : 

Tıklandığında sol taraf kaysın.

Tıklandığında sağ taraf kaysın modal örnek.

Tıklandığında sağ panel kaysın ve içine başka bir html dosyası çağrılsın :

Ftp ile kaynaklı bir sorundan dolayı menü ve sağ panel içinde açılması gereken secondary.html dosyası var olarak gözükmüyor. Bu yüzden menü örneğini ekleyemedim ayrıca sağ ve solda yüklenmesi gereken html dosyası da bulunamadı diye hata veriyor.

1 oy (3 votes, average: 5,00 out of 5)
Loading...
Önceki İçerikShowPassword
Sonraki İçerikCyclotron.js
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Please enter your comment!
Please enter your name here