Sağ ve solda görünmeyen tıklandığında açılan menü panelleri

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 :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="../jquery.pageslide.min.js"></script>

JavaScript kodu :

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

<script>
    $("a.first").pageslide();
</script>

Sağ tarafta açılan modal :

<script>
    $(".second").pageslide({ direction: "left", modal: true });
</script>

Css kodu :

<style>
body {
    background: #f4f4f4;
    font: 14px/18px"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #666;
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: none;
}
a, a:visited {
    color: #C30;
    text-decoration: none;
    border-bottom: 1px dotted #C30;
}
a:hover {
    color: #900;
    border-bottom-style: solid;
}
p {
    margin-bottom: 20px;
}
#content {
    width: 940px;
    padding: 10px;
    margin: 0 auto;
}
#content h1 {
    color: #333;
    line-height: 1em;
}
#content ul {
    padding-left: 0;
    list-style: none;
}
#content ul li {
    margin-bottom: 20px;
}
#modal {
    display: none;
}
#modal a {
    background: #CCC;
    color: #333;
    font-weight: bold;
    padding: 5px 10px;
    border: none;
}
#modal a:hover {
    background: #aaa;
}
</style>

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

Html :

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

<a href="_secondary.html" class="first">Link</a>

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

<a href="#modal" class="second">Link</a>
<div id="modal" style="display:none">
    <h2>Modal</h2>
    <a href="javascript:$.pageslide.close()">Close</a>
</div>

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

<a href="javascript:$.pageslide({ direction: 'left', href='_secondary.html' })">Link</a>

Download

Demo

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.