Gelişmiş Akordiyon Menü JQuery Eklenti

Gelişmiş Akordiyon Menü JQuery Eklenti
54

Sitem için hazırladığım arayüzün bir akordiyon menü’ye ihtiyacı vardı bende arayışa girmiştim nihayet aradığım tarzda bir jquery eklentisine ulaştım ve bunuda takipçilerimle paylaşıyorum.

responsive-menu-1

 

Proje’nin kullanımı oldukça basit bir yapıdadır. Ana başlıklar h1 ve h2 tagı içerisindedir. Alt menüler ise ul tagı içerisindedir. HTML yapı aşağıda ki gibidir.

<div class="accordion">
<h1>Menu</h1>
<h2>Title</h2>
<ul>
    <li><a>Something</a></li>
    <li><a>Something</a></li>
    <li><a>Something</a></li>
</ul>
<h2 class="active">Title</h2>
<ul>
    <li><a>Something</a></li>
    <li><a class="active">Something</a></li>
    <li><a>Something</a></li>
</ul>
<h2>Title</h2>
<ul>
    <li><a>Something</a></li>
    <li><a>Something</a></li>
    <li><a>Something</a></li>
</ul>
<h2>Title</h2>
<ul>
    <li><a>Something</a></li>
    <li><a>Something</a></li>
    <li><a>Something</a></li>
</ul>
</div>

Çağırmanız gereken javascript linkleri

<link rel="stylesheet" type="text/css" href="fancymeaccordion.css"/>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="fancymeaccordion.jQuery.js"></script>

Son olarak çalışmanızın head taglarının arasına jquery kodunu eklemeniz gerekmektedir.

[js]
<script>
$(function() {
$(‘.accordion’).fancymeaccordion();
});
</script>
[/js]

Diğer renk seçenekleri ve ek özellikler de mevcut onlardanda kısaca bahsedeyim. “pink” yazan yere aşağıda ki renk seçeneklerinden birini yazabilirsiniz.

[js]
<script>
$(function() {
$(‘.accordion’).fancymeaccordion({theme:"pink",speed:"slow"});
});
</script>
[/js]

Diğer Renk Seçenekleri

  • blue (default for this plugin)
  • red
  • pink
  • green
  • yellow
  • orange
  • purple
  • black

Hız Seçenekleri

  • Slow
  • Fast

[indir] Demo İndir Orjinal [/indir]

Yorum Yap