sss.jpg-Css ile Sikca Sorulan Sorular Sayfasi Yapma-cahitsoyman.blogspot.com
Web sitelerinin en önemli kısımlarından birini oluşturan sıkça sorulan sorular (F.A.Q.) bölümü, siteyi takip edenlerin veya müşterilerin aklına gelebilecek soruları cevaplayarak gidermede büyük rol oynadığı inkar edilemez. Özellikle E-ticaret sitelerinde bu bölüm, müşterilerin en çok ihtiyaç duyduğu veya başvurduğu bölümlerden biridir.

E-ticaret sitelerinde bu sayfa da müşterilerin kargo, müşteri hizmetleri, satın alınan malın iade ve değişim şartları hakkında ki soruların cevap bulduğu  bölümdür. Böylece müşteriler akıllarında ki sorulara bu sayfadan hızlı bir şekilde yanıt alabilirler.

Ürünleriniz ve hizmetlerinizin teknik konuları hakkında tüketiciler, açıklamalara ihtiyaç duyacaksa akıllarda ki sorulara cevap vermek için sitenizin belli bir yerinde (footer, header,ayrı bir sayfa) sıkça sorulan sorular bölümü oluşturabilirsiniz.


Bu yazımızda, SSS bölümünde nasıl sorular sorulmalıdır? Sorulması gereken sorular nelerdir? Kaç adet soruya cevap verilmelidir? gibi konulardan ziyade;
Css İle Sıkca Sorulan Sorular Sayfası Nasıl Yapılır  konusunda bilgi  vermeye çalışacağım.

Soru üzerine mausla gelindiğinde cevabın, kayarak açılır liste şeklinde ki  yerde  görüntülenmesini CSS kullanarak yapacağız.

Önce sorular ve cevapları sırasız liste şeklinde Html sayfamıza girelim. Burada son 2 soru da cevap bölümünü farklı bir şekilde (uzun cevap şeklinde) yaparak long classı eklendi.


<ul class="sss">
   <h1>Sıkça Sorulan Sorular</h1>
   <li><a href="#">Soru :Web sitesi nasıl yapılır?</a>Cevap: Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya.</li>
  <li><a href="#">Soru : Sitenizde kredi kartı güvenliği nasıl sağlanıyor?</a>Cevap: Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya.</li>
   <li class="long"><a href="#">Soru : Hangi kargo şirketi ile çalışıyorsunuz?</a>Cevap: Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır.</li>
  <li class="long"><a href="#">Soru : Özel tasarım yapıyor musunuz?</a>Cevap: Yinelenen bir sayfa içeriğinin okuyucunun dikkatini dağıttığı bilinen bir gerçektir. Lorem Ipsum kullanmanın amacı, sürekli 'buraya bir harf dağılımı sağlayarak okunurluğu artırmasıdır. Şu anda birçok masaüstü yayıncılık paketi ve web sayfa düzenleyicisi, varsayılan mıgır metinler olarak Lorem Ipsum kullanmaktadır.</li>
</ul> 

Şimdi de Css kodlarımızı yazalım.
Önce h1 başlığımızı ortalıyalım ve alttan 50px boşluk verelim. Sayfamızın genişliğini ayarlayalım, li elemanlarımızın yüksekliğne 30px verelim ve bu yüksekliğin dışında ki taşmaları gizleyelim. Açılır listemizin görüneceği hızı da 600 milisaniye olarak ayarlayalım.

h1{
        text-align: center;
        margin-bottom: 50px;
        }
ul.sss{
        width:90%;    
        }
       
ul.sss li {
        height: 30px;
        overflow: hidden;
        margin-bottom: 20px;
        border: 1px solid #ccd6dc;
        transition: height ease-in-out 600ms;
        list-style-type: none;
        } 

Bağlatımızın stil kodlarını yazalım.
Cevaplarımızı gizleyelim, background rengi, yükseklik ve alt çizgileri yok edelim.

ul.sss a {
        display: block;
        height: 30px;
        padding:5px 5px 0 5px;
        font-size:95%;
        color: #1e1e1e;
        text-decoration: none;
        background:#eceecb;
        } 

Mausla soru üzerine gelindiğinde yüksekliği artırarak (100px) cevabı gösterelim. Son 2 soru cevabı uzun olduğu için yüksekliği 130px e çıkarıyoruz.

ul.sss li:hover {
        height:100px;
}

ul.sss .long:hover {
        height:130px;
}

ul.sss li:hover a {
        font-weight: bold;
        font-size:90%;
        color:#d85c58;


Kaynak Kodları: İNDİR