CSS3 Acordion Efekti Yapımı

Merhaba Arkadaşlar,

Bu dersimizde size css3 ile yapılmış çok güzel bir acordion efektini sunacağım. Kullanımı  ve düzenlemesi oldukça basit. Kullanma amacımıza gelince ; bu css3 accordion efekti  sayfamızın bir bölümünde birden fazla yazı başlığını yayınlayabilme imkanı sunuyor. Böylelikle  yazdığımız alandan tasarruf ediyoruz.

Çalışma şekli; başlığın  üzerine gelince acordion şeklinde açılıyor ve içeriği ayrıntılı bir şekilde okuyabiliyorsunuz.Her başlık ayrı bir yazıyı muhafaza ediyor ve her başlığa ait farklı bir renk bulunmakta , böylelikle hangi başlık hangi alana hitap ediyor görebiliyorsunuz.

Çalışmada tasarımınıza uymayan renkler varsa bunu size verdiğim style.css dosyasıyla düzenleyebiliyorsunuz. Zaten 2 adet dosya yükleyeceksiniz  bunlardan birisi index.html dosyası, diğeri ise yukarıda bahsettiğim style.css dosyasıdır. Düzenlemeleri bu iki dosyadan yapacaksınız.

Kısaca bahsedeyim

index.html dosyasını açtığınızda ; aşağıdaki gibi içerikler çıkıyor, Başlık 1 yazan yer sizin acordion menüsünün başlık kısmı, lorem ipsum ile başlayan kısım ise o başlığa ait içeriktir. Düzenlemeyi buna göre yapıyorsunuz. Eğer herhangi bir başlığı silmek istiyorsanız.  <li class=”slide-X” >ile olan satır ve sonrasını sileceksiniz. Bu kadar basit:)

 <   li class=”slide-01″ >

<   div>

<  h2>Başlık1</h2>

<   p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</  p>

</  div>

</ li>

Şimdi ise css dosyasından bahsedeyim;

Style.css dosyasını açtın ve sayfanın altına gelin orada yer alan background arkaplan rengi, color ise yazı rengidir; istediğinizi değiştirerek sayfanıza göre düzenleme yapabilirsiniz.

.slide-01  { background:red; color:white; }
.slide-02  { background:orange; color:white; }
.slide-03  { background:yellow; color:#333; text-shadow:none; }
.slide-04  { background:green; color:white; }
.slide-05  { background:blue; color:white; }

Şunu unutmayın; şimdilik  internet explorerda css3 çalışmıyor  bu uygulamanın çalışması için yine sitemizde bahsedilen konuya bakmalısınız.  TIKLA 

Kolay gelsin.

(76)