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}

önizleme buton


download buton
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

9312

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.