web-accordion-collapsible

Responsive Akordiyon (Collapsible)

Bu makalemizde hem metin hem de görsel içeriklerinizi şık bir şekilde sunmanızı sağlayan akordiyon tasarımı hazırlayacağız. Bu yapı açılabilir/kapanabilir (collapsible) diye de isimlendirilmekte.

HTML5 elemanlarını CSS3 ve jQuery desteğiyle şekillendireceğimiz bu tasarım aynı zamanda liquid yapıda. Yani tüm taşınabilir cihazlara (responsive design) uyum gösteriyor.

ÖRNEĞİ GÖRÜNTÜLE

HTML5, CSS3 ve jQuery ile Açılır/Kapanır Akordiyon

Akordiyon tasarımlar genellikle uzun makaleleri küçük bir alanda sunmak için kullanılmakta. Google’ın Material Design‘ı da bu yapıya benzer tasarımlarla UX tarafında devrimler yaşatıyorken biz de konuya değinmek istedik.

Çok önceleri bu konuya benzer, sadece görsel sunumu yapabileceğiniz bir tasarımı da sizlerle paylaşmıştık.

Sadece CSS ile Tab Mantığı Kullanarak Listeleme

Hazırsanız başlayalım.

HTML Kodları

İlk olarak bütün öğeleri çevreleyecek bir section oluşturalım. Bu öğeye de web sayfanızdaki diğer sectionlarla karışmasını önlemek için .aw-accordion classını verelim. İçerisine de one, two, three ve four olmak üzere 4 adet akordiyon ekleyelim. Daha sonra bu alanların hepsini CSS ve jQuery ile yönetiyor olacağız.

Tüm HTML kodlarımız şunlar :

<section class="aw-accordion">
    <div class="one">
        <h1>1.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>

    <div class="two">
        <h1>2.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>

    <div class="three">
        <h1>3.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>
    
    <div class="four">
        <h1>4.Başlık</h1>
        <span><img src="resim adresi">Lorem ipsum dolor sit amet, consectetur.</span>
    </div>
</section>

Şimdi işe biraz stil katalım.

CSS Kodları

Başlangıç için .aw-accordion classını tanımladığımız sectionı düzenleyelim. Aslına bakarsanız section yapısının aşağıdaki genişlik tanımına ihtiyacı yok. Ancak hazırlayacağımız örneği özgünleştirirken alttaki kodu zaten yazacağınızı bildiğimiz için ekleme gereği duyduk.

section.aw-accordion{
  width:100%; 
}

Şimdi akordiyonun 4 panelinde ortak olan özellikleri ekleyelim. Örneğin 23%’lük genişliği 1%’lik padding ile birleştirerek her öğeye 25% oranında toplam genişlik katabiliriz. Böylece 25×4=100%, yani tam ekran genişliğine erişiriz. Bu küçük matematik hesaplarına daha sonra jQuery tarafında da değineceğiz.

Ayrıca güzel bir transition ekleyelim. Akordiyonun üzerine gelindiğinde imlecin text işaretçisine dönüşmesini engellemek için de bir cursor tanımı yapabiliriz.

section.aw-accordion .one, 
section.aw-accordion .two, 
section.aw-accordion .three, 
section.aw-accordion .four{
  font-size:14px;
  width:23%;
  float:left;
  height:230px;
  display:inline-block;
  z-index:1;
  position:relative;
  overflow:hidden;
  padding:1%;
  transition:all 200ms cubic-bezier(0.645, 0.575, 0.090, 1.000);
  cursor: default;
}

Şimdi, muhtemelen herkesin merak ettiği geçişli yazı (text gradient) efektine geliyoruz. Bu konuyu daha önce bol bol konuştuk. Adobewordpress takipçileri yazılara gradient uygulamayı çok iyi biliyorlar. Yeniler veya bilmeyenler için :

CSS ile Yazı Arka Planı : text-fill-color
CSS ile Yazılara Gradient Efekti

Devam edelim. İşte kodlarımız :

section.aw-accordion .one span, 
section.aw-accordion .two span, 
section.aw-accordion .three span, 
section.aw-accordion .four span{
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  height:100%;
  display:table;
}

Yazıların üzerlerine gelindiğinde gradient tasarımları gitmeli.

section.aw-accordion .one:hover span,
section.aw-accordion .two:hover span,
section.aw-accordion .three:hover span,
section.aw-accordion .four:hover span{
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

Şimdi herbir akordiyon öğesinin rengini belirleyelim.

section.aw-accordion .one{
  background-color:#3498db;
  border-radius:10px 0 0 10px;
}

section.aw-accordion .two{
  background-color:#e74c3c;
}

section.aw-accordion .three{
  background-color:#1abc9c;
}

section.aw-accordion .four{
  background-color:#f1c40f;
  border-radius:0 10px 10px 0;
}

Üzerlerine gelindiğinde, eğer içerik uzunsa scroll gözükmeli.

section.aw-accordion .one:hover, 
section.aw-accordion .two:hover, 
section.aw-accordion .three:hover, 
section.aw-accordion .four:hover{
  overflow-y: auto;
}

Şimdi de tasarımımıza özel bir scrollbar çubuğu hazırlayalım.

section.aw-accordion div::-webkit-scrollbar {  
    width: 12px;  
}  
section.aw-accordion div::-webkit-scrollbar-track {  
    background-color: rgba(1, 1, 1, .1);
}  
section.aw-accordion div::-webkit-scrollbar-thumb {  
    background-color: rgba(1, 1, 1, .2);
}  
section.aw-accordion div::-webkit-scrollbar-thumb:hover {  
    background-color: rgba(1, 1, 1, .3);
}  

Akordiyon resimlerini ve başlıklarını düzeltelim.

section.aw-accordion div img{
  float:left; 
  margin:0 10px 0 0;
  border:3px solid rgba(255, 255, 255, .2);
  box-shadow:0 0 15px rgba(1, 1, 1, .1);
  -webkit-box-shadow:0 0 15px rgba(1, 1, 1, .1);
  -moz-box-shadow:0 0 15px rgba(1, 1, 1, .1);
  width:150px;
}

section.aw-accordion div img,
section.aw-accordion div h1{
  opacity:.3; 
  transition:all .3s
}

section.aw-accordion div:hover img,
section.aw-accordion div:hover h1{
  opacity:1;
}

section.aw-accordion div h1{
  margin:0 0 5px;
  font-weight:300; 
  color:white;
}

1024 ve 768 piksel altındaki cihazlara özel responsive tasarımlar oluşturalım.

@media (max-width:1024px){
  section.aw-accordion .one,
  section.aw-accordion .two,
  section.aw-accordion .three,
  section.aw-accordion .four{
    font-size:12px;
  }

  section.aw-accordion div img{
    width:100px;
  }

  section.aw-accordion div h1{
    font-size:120%
  }
}

@media (max-width:768px){
  section.aw-accordion div img{
    width:60px;
  }

  section.aw-accordion div h1{
    font-size:100%
  }
}

Tasarımımız hazır. Şimdi işe biraz fonksiyonelite katalım.

Bu da ilginizi çekebilir  Sadece CSS ile Yatay Menü

jQuery Kodları

İşin jQuery tarafında da farenin akordiyon üzerindeki hareketini takip edeceğiz. Genişlikleri de bu şekilde yöneteceğiz. Ayrıca hover edilen bir akordiyonun scroll ile aşağı inmesi halinde her mouseout aşamasında scrollTop konumunu işleyeceğiz. İşte jQuery kodlarımız.

$( "section.aw-accordion div" ).mouseover(function() {
  $(this).css('width','50%');
  $(this).siblings('div').css('width','14%');
});

Üzerine gelinen öğeyi 50% genişliğe çekiyoruz. Sağ ve soldan 1% değerdeki padding bize toplamda 52% oranında genişlik vermekte. Geriye kalan 48% lik oranıda 16%(her biri 14% olan akordiyonları %2 şer padding ile büyütüyoruz) genişliğinde 3’e bölüyoruz.

Bu kadar!

Kapanış

Birçok Adobewordpress takipçisinden derslerde Türkçe terimler kullanmadığımız için tepkiler almaktayız. Yine benzer oranda yabancı takipçimiz de niye İngilizce hazırlamadığımız yönünde şikayetlerini bildirmekte. Özellikle video derslerimiz için.

İngilizce içerik üretmek gibi radikal kararı almayı henüz düşünmüyoruz. Ancak tanımlarımızın İngilizce olması, Adobe derslerinin İngilizce dili ayarlanmış programlarla sürdürülüyor olması herkesin faydasına. Hem sizlerin teknik dile aşina olmanızı hem de yabancı takipçilerimizin süreci anlamasını sağlıyor.

Bu makalemizde de yabancı terimler geçtiği için fikirlerimizi sizlerle paylaşmak istedik. Anlayışınız için teşekkürler.



  • yunusilker

    Merhaba sitenizi yeni keşfettim ve çok beğendim yazılarınızın devamını dilerim..
    Bu kodu kullanmaya calısıyorum fakat bir sorum olucak mouse herhangi birinin uzerındeyken acılıyor tamam ama sitenin herhangı bır alanına cekınce mouse u hepsının ılk gorunumune donmesını ıstıyorum nasıl saglaya bılırım ?

  • Alper Şen

    merhaba ben dörtlü değilde 3lü yapmak istiyorum neleri düzenlemem gerekiyor? Teşekkürler