Sidr – Fb app tarzı gizli yan panel yapma

0
187
views

sidr

Facebook mobil uygulamalarını kullananlar bilirler  bu özelliği parmak ile soldan sağa yada sağdan sola doğru ekran üzerinde uygulamayı sürükleyince yan menüler  açılır. Hem mobil cihazlarla uyumlu hem de normal internet siteleri için de uyumlu bir yapıya sahip  olan  jQuery Sidr eklentisi ile Facebook app benzeri çalışan web sayfaları ve mobil tasarımlar yapabilmek oldukça kolay bir iş.  Özellikle web sitesindeki içeriklerin tam ekran görünmesini isteyen kişiler  için çok faydalı bir uygulama.

Sidr’nin yapabilecekleri bunlarla da sınırlı değil tabi. Biraz daha kurcalayarak sayfa içinde herhangi bir yere tıklandığında Callback  ile başka bir veriyi sidebar bölümüne çekebilmeniz  mümkün. Örneğin Facebook benzeri bir web siteniz var ve sayfa içinde Arkadaşlar, mesajlar, gruplar gibi linklere sahipsiniz. Bunlardan herhangi birine  tıklandığında sidebar sağa doğru kaysın ve tıkladığım linke göre veriler listelensin istiyorsanız eğer bu uygulama bunu da yapabiliyor. Arkadaşlara tıklandığında sidebarda arkadaşlar listelenir, gruplara tıklandığında grup isimleri ve mesajlara tıklandığında mesaj kutusunun açılmasını sağlayabilecek bir yapısı var. Sadece örnek belirtmek amaçlı bunları yazdım. Aklınızdan geçen başka sayfa çağırma işlemlerini de yapabiliyor. Her tıklama işleminden sonra sidebar kapanıp açılıyor ve tıklayarak çağırdığınız içerikler sidebarda listeleniyor.

Özellikleri daha da  bitmedi. Yan menünün sağda yada solda çıkmasını seçebildiğiniz gibi yatay menü şeklinde kullanabilmeniz de mümkün. Sayfayı aşağı doğru kaydırdığınızda belli bir noktadan sonra üst menü tavana yapışıp kalıyor ve sayfa ile beraber aşağı yukarı doğru kayıyor. Ayrıca mobil cihazlarla uyumlu olarak yapıldığı için tarayıcıyı küçülttüğünüz  anda linkler kaybolup yerine kategori ikonu geliyor.

Sağda ve solda çıkan gizli yan panelleri dokunmatik cihazlar üzerinden parmakla sürükleyerek de açıp kapatabilmeniz mümkün. Bunun için dokunmatik bir cihaz kullanmanız gerekiyor. Masa üstü bilgisayarlarda mouse ile bu işlemi gerçekleştirmek mümkün değil. Bu yüzden mobil cihazlarda nasıl çalıştığını bilgisayarlardan test edemezsiniz. Son olarak eklemem gereken not: Dokunmatik cihazlarda çalışabilmesini sağlayan touchwipe.js uygulamasıdır.

 

 

Kullanım

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

Dark ve Light diye iki farklı temadan oluşuyor. Dark temasının Css dosyası aşağıdaki gibidir.

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

Js dosyalarını çalışmanızın en altına eklemeniz gerekmekte.

Basit kullanım :

Çoklu menü (sağda ve solda çıkan) :

Sidebar içine başka bir içeriği çağırma :

Örnek olarak iki bölüme metin eklenmiş ve bir bölümde de başka bir html dosyası yan panele çağrılmaya çalışılmış.

Responsive üst menü :

Demo sayfasından Sidr için kullanılabilir diğer parametrelere de göz atmanızda fayda var.

 

Aranan kelimeler:

  • android için responsive saga açılan menü
  • dropdown sağa kaysın
1 oy (No Ratings Yet)
Loading...
Önceki İçerikjSelect.js
Sonraki İçerikTouchBox

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