Yapışkan Sidebar Nasıl Yapılır? 62

Yapışkan Sidebar Nasıl Yapılır?

Geoit Wordpress Temasını Satın Al

Bu yazımda yapışkan web sitenizde bulunan sidebar (kenar çubuklarını) yapışkan hale getirip projenize nasıl entegre edebileceğinizi anlatıyor olacağım. Gün geçtikçe kullanımı artan bu yapışkan sidebar çeşidi bir web sitesinde kullanıcıların aşağı ve yukarı kaydırma işlemini yaparken kalıcı olarak görünür durumda kalmasına yarayan oldukça kullanışlı bir sidebar çeşididir.

Ben javascript bilgimin üst seviyede olmaması kaynaklı olarak bu tür işler için jquery eklentisi kullanmayı tercih ediyorum. Bu örnekte yapışkan sidebar için Theia Sticky Sidebar’ını kullanacağız. Theia Sticky Sidebar github’da açık kaynak kodlu olarak paylaşılmış bir eklentidir. Lisans açıklamasına şu linkten ulaşabilirsiniz. MIT lisansına sahiptir yani özgür yazılım lisansıdır. Ayrıca ilgili eklentinin wordpress eklentisi de mevcuttur. Onada şu linkten ulaşabilirsiniz.


Yapışkan Sidebar Örnekleri


Başlayalım

TheiaStickySidebar, oldukça kullanışlı ve rahat bir yapı sunmaktadır. theiaStickySidebar’ı projenize dahil etmek oldukça basittir. jQuery, javascript kodu bilmenize yazmanıza gerek yoktur.

Theia Sticky Sidebar

JS Dosyalarını Dahil Edin

İlk olarak github projesini ziyaret edin ve dist klasörünü projenizin içerisine dahil edin ve js dosyalarını çağırın.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<script type="text/javascript" src="dist/ResizeSensor.min.js"></script> 

<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>

Web sitenizin HTML Yapısını Gözden Geçirin

Web sitenizin HTML yapısını gözden geçirin ve aşağıdaki yapıya benzer veya aynı şekilde ayarlayın. İsteğe göre content ve sidebar alanının içerisine bir de .theiaStickySidebar classında bir div açabilirsiniz ama bu zorunlu değildir.

<div class="wrapper">   
  <div class="content">
   Content kısmı
  </div>
  <div class="sidebar"> 
   Sidebar kısmı
 </div>
</div>

HTML Yapımızı Javascript ile Belirtelim

HTML yapımızı ayarladık, javascript dosyalarını çağırdık ama son yapmamız gereken bir iş daha kaldı. Bu iş tabiki de hangi div’in yapışkan hale gelmesini istediğimizi belirtmek.

Web sitemizin en alt kısmına aşağıdaki kodları ekleyelim.

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({ // HTML yapımızı bu kısımda belirtiyoruz.
// Ayarlar
additionalMarginTop: 30 // 0 verirseniz ekranın en üst kısmında olur bu kod sayesinde yukardan 30 px boşluk bırakıyoruz.
});   
}); 
</script>

Ayarlar

Javascript kodlarında yapabileceğiniz ayar başlıkları şöyledir;

containerSelector

Sidebar’ın konteynır elemanı. Belirtilmezse, kenar çubuğunun üst öğesine varsayılan değerdir.

additionalMarginTop

Yapışkan alana margin top stili atamaya yarar. Varsayılan değer olarak 0 alınır .

additionalMarginBottom

Yapışkan alana margin bottom stili atamaya yarar. Varsayılan değer olarak 0’dır .

updateSidebarHeight

Kenar çubuğunun yüksekliğini günceller. Örneğin arka plan düzgün şekilde gösterilmiyorsa bunu kullanın. Varsayılan değer true’dur .

MinWidth

Genişliği bu değerin altındaysa kenar çubuğu normale döner. Duyarlı tasarımlar için kullanışlıdır. Varsayılan değer olarak 0’dır .

Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..

Bir Cevap Yaz