CSS Yatay Accordion Menü Yapımı

Akordiyon, katlanabilir bir içeriktir. Akordiyonlar, büyük miktarda metin veya grafik içeriği gizlemek ve göstermek arasında geçiş yapmak istediğinizde kullanışlıdır.

Akordiyon sekmeleri web geliştirme alanında en popüler olanıdır. Web tasarımcılarının bilgileri sınırlı bir alanda sunmak için daraltılabilir içerik panelleri görüntülemelerine yardımcı olur. Akordiyon sekmeleri, bir başlık altında istenmeyen içerikleri gizleyerek yalnızca istenebilir bilgileri göstererek sitenizi temiz tutabilir. Harika bir web sitesi Akordiyon sekmeleri ve menüleri söz konusu olduğunda ve hiç kimse kafa karışıklığını hissetmekten bilgiyi kısa bir şekilde bulur.

CSS3 geçişlerini kullanarak Akordiyon panellerini genişleten ve daraltan, tamamen erişilebilir ve sorunsuz bir şekilde Çalışabilir bir Akordiyon bileşeni yapacağız.

Accordion'un Stil Sayfasını(stil.css) etiketleri kullanarak içe aktarın.

<link rel="stylesheet" href="stil.css"/>

Akordiyon için temel HTML yapısı.

HTML:

 <li class="ac-01">

    <div>

      <h2>HTML</h2>

      <p>Lorem ipsum .............</p>

    </div>

  </li>

Akordiyon için CSS dosyasında sayfanın altına gelin background ve yazı rengini(color) değiştirerek web sayfanıza göre ayarlayın.

.ac-01  { background:#1142aa; color:white}
.ac-02  { background:#4573d5; color:white}
.ac-03  { background:#6c8dd5; color:white}
.ac-04  { background:#2a45bd; color:white}
.ac-05  { background:#06266f; color:white}