Sidr – Fb app tarzı gizli yan panel yapma

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.

<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">

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

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

<script src="javascripts/jquery.js"></script>
<script src="javascripts/sidr/jquery.sidr.min.js"></script>

Basit kullanım :

<a id="simple-menu" href="#sidr">Toggle menu</a>

<div id="sidr">
  <!-- Sayfa içeriği -->
  <ul>
    <li><a href="#">List 1</a></li>
    <li class="active"><a href="#">List 2</a></li>
    <li><a href="#">List 3</a></li>
  </ul>
</div>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

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

<a id="left-menu" href="#left-menu">Left Menu</a> 
<a id="right-menu" href="#right-menu">Right Menu</a>

<script>
$(document).ready(function() {
    $('#left-menu').sidr({
      name: 'sidr-left',
      side: 'left' // By default
    });
    $('#right-menu').sidr({
      name: 'sidr-right',
      side: 'right'
    });
});
</script>

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ış.

<a id="existing-content-menu" href="#existing-content-menu">Existing content</a> 
<a id="remote-content-menu" href="#remote-content-menu">Load remotelly</a> 
<a id="callback-menu" href="#callback-menu">Callback loaded</a>

<header id="demoheader">
    <h1>Demos &amp; Usage</h1>
</header>

<div id="demo-content">
    <p>Here are described differents ways of usage for this plugin, you can read and adapt them to your website's requeriments. Below are described all options with details.</p>
</div>

<script>
$(document).ready(function() {
    $('#existing-content-menu').sidr({
      name: 'sidr-existing-content',
      source: '#demoheader, #demo-content'
    });
    $('#remote-content-menu').sidr({
      name: 'sidr-remote-content',
      source: 'https://www.example.com/remote-menu.html'
    });
    $('#callback-menu').sidr({
      name: 'sidr-callback',
      source: function(name) {
        return '<h1>' + name + ' menu</h1><p>Yes! You can use a callback too ;)</p>';
      }
    });
});
</script>

Responsive üst menü :

<style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }
}
</style>

<div id="mobile-header">
    <a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>

<div id="navigation">
    <nav class="nav">
        <ul>
            <li><a href="#download">Download</a></li>
            <li><a href="#getstarted">Get started</a></li>
            <li><a href="#usage">Demos &amp; Usage</a></li>
            <li><a href="#documentation">Documentation</a></li>
            <li><a href="#themes">Themes</a></li>
            <li><a href="#support">Support</a></li>
        </ul>
    </nav>
</div>

<script>
    $('#responsive-menu-button').sidr({
      name: 'sidr-main',
      source: '#navigation'
    });
</script>

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