25 Adet jQuery ve Css Akordiyon Örneği

1
2325
views

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

  • 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

 

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

Common

 

4. LiteAccordion

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

 

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

tek

 

7. zAccordion

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

 

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

 

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

easy

Aranan kelimeler:

  • akardion menü
  • akardiyon ör nek
  • akardiyon su basligi
  • akordion menü
  • akordiyon
  • resimli acordion menü
  • tıklayınca açılan menü
1
2
3
1 oy (19 votes, average: 3,79 out of 5)
Loading...
Önceki İçerik10+ jQuery AutoComplete (otomatik tamamlama) Eklentileri
Sonraki İçerikPhotoshop saç sakal kesimi

1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?

Paylaş

1 Yorum

CEVAP VER

Please enter your comment!
Please enter your name here