Mintik posted
4 year ago

25 Adet jQuery ve Css Akordiyon Örneği

Bu listeyi yaklaşık bir buçuk yıl önce hazırlamıştım. O zamandan bu yana bazı örneklerin siteleri ya kapandı yada sitelerden içerikler silindi. Bu yüzden bir düzenleme yapma ihtiyacı duydum. Şu an itibari ile 17 tane kaldı ama  gün geçtikçe bulduğum bütün akordiyon örneklerini bu yazı altında paylaşmaya gayret göstereceğim sizler için. Site site dolamaktansa istediğiniz her türden akordiyon örneğini bu yazı altında bulabileceksiniz.

Her birinin farklı özellikleri ve farklı çalışma sistemi var. Bu güncellemeden sonra dikkat ettiğim kadarıyla çoğu Css ile tasarlanmış. Bundan sonra ekleyeceğim bütün örnekler jQuery eklentileri olacak. Başlığı şimdilik değiştirmedim hala 25 adet olarak geçiyor. 25 taneden fazlasını bulacağınız konusunda şüpheniz olmasın. En popüler ve en çok kullanılan akordiyon uygulamalarını sizler için bu listeye eklemeye gayret göstereceğim.

 

1. Sadece Css ile tasarlanmış akordiyon.

akord
  • Detay Css dersi
  • Demo Css dersi

 

2.  Renkli sekme, sekme kilitleme ve resim ekleme seçenekleri olan bir çalışma.

resimli

 

2.  MiniAccordion – Daha çok slide tab uygulamasına benzeyen bir yapısı var. Sağ sol ok işaretleri ve numaralara bastığınızda çerçeve içeriği mp3 player tarzı aşağı yukarı kayıyor.

mini
  • Download 
  • Demo

 

3. Common – Yatay, dikey, mouse üzerine gelince açılan, tıklayınca açılan gibi örnekleri var.

Common

 

4. LiteAccordion

lite
  • Demo Lite
  • Detay Lite

 

5. SlidingStacked – Mouse üzeirne geldikten sonra sekmeler arası slide işlemi başlıyor ancak demoda mouse hareketleri ezberleniyor sanki. Mouseyi sekmelerin üzerinde gezdirip bıraktıktan sonra bile hareketler  devam ediyor.
stack

  • Detay SlidingStacked
  • Demo SlidingStacked

 

6. Tek başına kişisel bir web sayfası için yeterli olan dikey bir çalışma.

tek

 

7. zAccordion

zAccordion
  • Download zAccordion
  • Demo zAccordion

 

8. Sekme içinde akordion yani açılır menü dediğimiz alt kategorilerin bile eklenebileceği özelliğe sahip. Konu başlığı Css ve jQuery olarak attık ama bu da Prototype kütüphanesi ile çalışıyor. Daha önceden dikkat edemedim ve son düzenlemede de kaldırmak istemedim belirttiğim özelliği yüzünden.

protoAccordin
  • Download PrototypeAccordion
  • Demo PrototypeAccordion

 

9.  Bu sayfada nasıl akordiyon menü oluşturacağınız anlatılıyor. Demo ve ders  tek sayfaya eklenmiş. Demolardan bir tanesi mouse üzerine gelince diğeri de tıklandığında linkler açılıyor. Ayrıca ok işareti de  açılan sekmeye göre değişiklik gösteriyor.

mouseover
  • Demo

 

10. EasyAccordion – Birkaç çeşit örneği bulunuyor bununda. Yan başlıklar, sekmelere numara ekleme gibi.

easy
  • Demo Easy

Pages: 1 2 3

Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail

  1. fatih says:

    Merhaba css kodunu wordpress sitede kullananlar jQuery eklentilerini kullanabiliyor mu? bir adet sayfama akordiyon ekleyeceğim nasıl yapabilirim.