DeliPenguen JQuery Akordiyon Menü Kütüphanesi

11 Şubat 2013
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

Download          Preview

 

“DeliPenguen Akordiyon Menü” nedir?

Web sitenizde kullandığınız dikey menüleri Akordiyon adı verilen tarzda kullanmanızı sağlayacak bir JQuery Kütüphanesidir.

Ayarlar ve Örnek

Kütüphanenin kullanımında hiç bir parametre kullanılmasına ihtiyaç yoktur. Yalnızca tanımlamasının yapılması yeterli olacaktır. Bunu da aşağıdaki gibi yapabilirsiniz. Öncelikle bir JQuery kütüphanesini sayfanıza ekleyin, ardından DeliPenguen Akordiyon Menü kütüphanesini sayfanıza ekleyin ve en son olarak da tanımlamasını yaparak işleminizi tamamlayın.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.delipenguen.akordiyon.min.js"></script>
<script type="text/javascript">
   $(function(){$("#nav li").AkordiyonMenu();});
</script>

Temel HTML Yapısı

<ul id="nav">
   <li>
   <a href="#">Item 1</a>
   <ul>
      <li><a href="#">Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
   </ul>
   </li>
</ul>

Bu yapıyı dilediğiniz kadar iç içe oluşturabilirsiniz. Bunun için ön izleme bölümündeki örnek kodu kullanabilirsiniz.

CSS Kullanımı

Kütüphane ile kullanabileceğiniz CSS özellikleri aşağıdaki gibidir. Tüm özellikleri istediğiniz gibi değiştirebilirsiniz. Yalnızca yapıya müdahale etmeyin. Örneğin; “#nav li.active” başlığını “#menum li.active” olarak değiştirebilirsiniz. Bu başlıklara ait tüm içeriğe de müdahale edebilirsiniz.

#nav {font-family:verdana; font-size:8pt;margin: 0 0 15px 0; padding: 0;list-style-type: none; float: left; width: 280px; border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999;}
#nav li {margin: 0; padding: 0;list-style-type: none;display:block; background-image:url(arrow_right.png); background-position:right top; background-repeat:no-repeat;}
#nav li.active {background-image:url(arrow_bottom.png); background-position:right top; background-repeat:no-repeat;}
#nav li.nonBg {background-image:url();}
#nav li a {display: block; padding: 5px 7px 5px 7px; background:transparent; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #AAA; color: #fff;}
#nav li ul {display: none; padding: 0px 0px 0px 8px; background: #ececec;}

Özellikler

– Kütüphane IE 8,9, Firefox ve Chrome ile sorunsuz çalışabilmektedir. (Diğer tarayıcılar ile test etme fırsatı bulamadım.)
– Kullanılan tüm ayarlar kolaylıkla özelleştirilebilir.
– Bir sayfa içerisine sınırsız sayıda eklenebilir.
– Sınırsız alt menü kullanma olanağı.
– Eklentinin optimize edilmiş (minified) sürümü sadece 511 Byte!
– Kütüphane, DeliPengeun.com üzerinde yayınlanan diğer tüm JQuery kütüphaneleri gibi MIT ve GPL lisansının şartları ile dağıtılmaktadır. Bu şartlara uyduğunuz sürece kendi uygulamalarınızda kullanabilirsiniz.

Destek

Kütüphanenin kurulumu ile ilgili aklınıza takılacak olan soruları bu yazı altındaki yorum bölümünden gönderebilirsiniz.

İndir

Kütüphaneyi aşağıdaki linkten indirebilirsiniz. Çalışan halini görüntülemek için ise burayı kullanabilirsiniz.

 

Download          Preview

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. Abdulkadir
    14 Şubat 2013 - 22:34

    elinize sağlık hocam muhteşem

  2. tolga deniz
    16 Aralık 2013 - 18:43

    merhaba belirtmiş oluğunuz uygulamayı kullanmak istiyorum ama sorunum şu ben üzerine tıklayınca değil üzerine gelince alt kategorinin açılmasını istiyorum css ve js dosyasında hover etkisi elde etmek için yaptığım değişikliklerin hiç biri sonuç vermedi yardımcı olursanız çok sevinirim