CSS Tabanlı İçerik Akordeon Nasıl Oluşturulur
Bugünün öğreticisinde, nasıl yaratabileceğimizi öğreneceğiz. sadece CSS3 kullanarak yatay ve dikey içerik akordeon. Bu işi sizin için yapabilecek birçok jQuery eklentisi var ancak ziyaretçi Javascript'i kapalıysa akordeon düzgün çalışmazsa ne yaparsınız? Akordeonunuz tamamen CSS’de ise, tüm ziyaretçileriniz için işe yarayacaktır..
Biz yaratacağız yatay ve dikey içerik akordeon. Başlık metnine tıklandığında slayt tam içeriği göstererek açılır ve işte nasıl göründüklerine dair hızlı bir önizleme (ekran görüntüleri).
Gördüğün gibi mi? Kodlama başlasın!
1. HTML ve İçeriğin Hazırlanması
Başlamak için akordeon için HTML oluşturacağız.
Yapının bir kaba ihtiyacı var div ve sonra bir Bölüm akordeondaki her bir slayt için. Bu örnekte 5 slayda sahibiz. Slaytların her biri içerik için bir başlığa ve paragrafa sahip olacak.
Hakkımızda
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse kimliği lobortis massa. Çok yaşa viverra velit leo, amet elementum mi otur. Fusce posuere nunc mi mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris oturmak justo tempor nec lacinia magna molestie. Etiam Placerat kongre vitae adipiscing kondom. Aliquam ac arat lorem, ut iaculis justo. Etiam Mattis Dignissim Gravida. Aliecam nec justo ante, semper değil mi. Nulla konstrüksiyonu, maskumu canlandırıyor, en sevdiğim vulputate sed. Maecenas elit şöhreti, egestas eget placerat olmayan, fringilla vel eros. Nam vehicula elementum nulla sed sonucu. Phasellus eu enrat enim. Magna non massa dapibus scelerisque şirketinde eu lorem.
Hizmetler
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse kimliği lobortis massa. Çok yaşa viverra velit leo, amet elementum mi otur. Fusce posuere nunc mi mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris oturmak justo tempor nec lacinia magna molestie. Etiam Placerat kongre vitae adipiscing kondom. Aliquam ac arat lorem, ut iaculis justo. Etiam Mattis Dignissim Gravida. Aliecam nec justo ante, semper değil mi. Nulla konstrüksiyonu, maskumu canlandırıyor, en sevdiğim vulputate sed. Maecenas elit şöhreti, egestas eget placerat olmayan, fringilla vel eros. Nam vehicula elementum nulla sed sonucu. Phasellus eu enrat enim. Magna non massa dapibus scelerisque şirketinde eu lorem.
Blog
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse kimliği lobortis massa. Çok yaşa viverra velit leo, amet elementum mi otur. Fusce posuere nunc mi mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris oturmak justo tempor nec lacinia magna molestie. Etiam Placerat kongre vitae adipiscing kondom. Aliquam ac arat lorem, ut iaculis justo. Etiam Mattis Dignissim Gravida. Aliecam nec justo ante, semper değil mi. Nulla konstrüksiyonu, maskumu canlandırıyor, en sevdiğim vulputate sed. Maecenas elit şöhreti, egestas eget placerat olmayan, fringilla vel eros. Nam vehicula elementum nulla sed sonucu. Phasellus eu enrat enim. Magna non massa dapibus scelerisque şirketinde eu lorem.
Portföy
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse kimliği lobortis massa. Çok yaşa viverra velit leo, amet elementum mi otur. Fusce posuere nunc mi mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris oturmak justo tempor nec lacinia magna molestie. Etiam Placerat kongre vitae adipiscing kondom. Aliquam ac arat lorem, ut iaculis justo. Etiam Mattis Dignissim Gravida. Aliecam nec justo ante, semper değil mi. Nulla konstrüksiyonu, maskumu canlandırıyor, en sevdiğim vulputate sed. Maecenas elit şöhreti, egestas eget placerat olmayan, fringilla vel eros. Nam vehicula elementum nulla sed sonucu. Phasellus eu enrat enim. Magna non massa dapibus scelerisque şirketinde eu lorem.
Temas
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse kimliği lobortis massa. Çok yaşa viverra velit leo, amet elementum mi otur. Fusce posuere nunc mi mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris oturmak justo tempor nec lacinia magna molestie. Etiam Placerat kongre vitae adipiscing kondom. Aliquam ac arat lorem, ut iaculis justo. Etiam Mattis Dignissim Gravida. Aliecam nec justo ante, semper değil mi. Nulla konstrüksiyonu, maskumu canlandırıyor, en sevdiğim vulputate sed. Maecenas elit şöhreti, egestas eget placerat olmayan, fringilla vel eros. Nam vehicula elementum nulla sed sonucu. Phasellus eu enrat enim. Magna non massa dapibus scelerisque şirketinde eu lorem.
Şimdi slaytlarımız var akordeon stiline başlayabiliriz.
2. CSS Styling
İlk önce, içeriğe stil vermeliyiz div Akordeon Bu bize slaytların her birinin ve başlıkların her birinin nasıl görüntüleneceği hakkında bir fikir verecektir..
/ * Akordeon kutusunu tanımla * / .accordion width: 830px; taşma: hidden; marj: 10 piksel otomatik; color: # 474747; background: # 414141; dolgu: 10px;
Daha sonra slaytların her biri için başlıklar oluşturacağız.
.akordeon bölümü float: left; taşma: hidden; color: # 333; İmleç: işaretçi; arkaplan: # 333; marjı: 3 piksellik; akordeon bölümü: vurgulu background: # 444;
Arka plan rengini, ziyaretçilerin slaytı görüntülemek için tıklayacağı başlık olacak bölümde koyu gri olacak şekilde ayarlıyoruz. Bu bölümü hem başlık hem de içerik için kullanıyoruz, bu da daha az HTML kullanabileceğimiz ve slaydın başlığını içeriğin başlığı olarak yeniden kullanabileceğimiz anlamına gelir..
.akordeon bölümü p ekran: yok;
Şu anda tüm slaytlar kapanacak, böylece paragrafın açılıncaya kadar paragrafın görünmediğinden emin olmamız gerekiyor, bu nedenle şu an için paragrafın görüntüsünü yok olarak ayarlayın..
.akordeon bölümü: sonra pozisyon: göreceli; yazı tipi boyutu: 24 piksel; Renk: # 000; Font-ağırlık: Kalın; akordeon bölümü: nth-child (1): sonra content: '1'; akordeon bölümü: nth-child (2): sonra content: '2'; akordeon bölümü: nth-child (3): sonra content: '3'; akordeon bölümü: nth-child (4): sonra content: '4'; akordeon bölümü: nth-child (5): sonra content: '5';
Slaytlar kapalıyken, hangi sayı slaytında olduğumuzu söylemek için başlığın altında bir sayı görüntülemek istiyoruz. Bunun için bölüm başlığından sonra içerik eklemek için CSS kullanacağız. :sonra sözde sınıf seçici.
Şimdi slayt başlığını oluşturduk, slaydı akordeonda görüntülemek için click olayını yapabiliriz. Ancak bir sorun var, CSS bir click olayına sahip değil, bu nedenle akordeon normalde jQuery kullanılarak yaratılıyor, böylece başlık metnine bir click olayı ekleyebiliriz.
CSS’deki click olayını taklit etmemiz gerekir. :hedef sözde sınıf seçici.
3. kullanma :hedef sözde sınıf Seçici
:hedef parça tanımlayıcısını şekillendirmemize izin verir. Bazen sayfadaki bir yere işaret etmek için sayfa içi bağlantı etiketi kullanırız. Bağlantıyı tıkladığınızda İD çapa etiketinde hedef haline gelir ve bunu kullanarak :hedef selektör.
Bunu akordeon içine eklemek için, başlığın çevresine bir bağlantı eklememiz gerekir. İD slaytın.
Hakkımızda
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Suspendisse kimliği lobortis massa. Çok yaşa viverra velit leo, amet elementum mi otur. Fusce posuere nunc mi mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris oturmak justo tempor nec lacinia magna molestie. Etiam Placerat kongre vitae adipiscing kondom. Aliquam ac arat lorem, ut iaculis justo. Etiam Mattis Dignissim Gravida. Aliecam nec justo ante, semper değil mi. Nulla konstrüksiyonu, maskumu canlandırıyor, en sevdiğim vulputate sed. Maecenas elit şöhreti, egestas eget placerat olmayan, fringilla vel eros. Nam vehicula elementum nulla sed sonucu. Phasellus eu enrat enim. Magna non massa dapibus scelerisque şirketinde eu lorem.
.akordeon bölümü: hedef background: #FFF; dolgu: 10px; akordeon bölümü: target: hover background: #FFF; akordeon bölümü: hedef h2 genişlik:% 100; akordeon bölümü: hedef h2 a renk: # 333; dolgu: 0; akordeon bölümü: hedef p display: block; akordeon bölümü h2 a dolgu: 8px 10px; Ekran bloğu; yazı tipi boyutu: 16px; yazı-ağırlık: normal; Renk: #eee; text-decoration: none;
Yukarıdaki kod, akordeonya uyması için lamın boyutunu değiştirecek ve arka plan rengini beyaz olarak değiştirecektir. Paragraf gizlendi, bu yüzden şimdi hedefte paragrafı göstermemiz gerekiyor.
Şimdi akordeonun başlığına tıkladığınızda, slayt slaydın içeriğini görüntülemek için stil değiştirir.
4. Yatay Akordeon
Yukarıdaki kod genel akordeon oluşturacaktır, şimdi yatay ve dikey akordeon arasındaki farklar için CSS değişiklikleri yapmaya başlayabiliriz. Bu akordeonların her ikisi de aynı işlevselliğe sahiptir, ancak başlık stili farklı olacaktır.
.yatay bölüm genişlik:% 5; Yükseklik: 250 piksel; -moz-geçiş: genişlik 0.2s kolaylık; -webkit-geçişi: genişlik 0.2s kolaylık; -o-geçiş: genişlik 0.2s kolaylık; geçiş: genişlik 0.2s kolaylık;
İlk önce biz Genişlik Başlık bölümünün% 5’e kadar olan kısmı kapalı bir slayttır. Bölüm hem başlık hem de slayt içeriği olduğundan, geçiş özelliğini kullanarak içeriği görüntülemek için animasyonu eklememiz gerekir..
/ * Slaytın numarasını * / .horizontal bölümün konumlandırın: after top: 140px; Sol: 15px;
Slayttaki sayının konumu, her kapalı başlıktaki aynı konum olacaktır, bunlar dikey başlıklara göre farklı konumlandırılmıştır..
/ * Kapalı slaydın başlığı * /. Yatay bölüm h2 -webkit-transform: rotate (90deg); (90deg) döndürmek;: -moz-transform -o-dönüşümü: döndürme (90 derece); dönüşümü: döndür (90 derece); en: 240 piksel; konum: göreceli; Sol: -100px; En: 85px; / * Açık slaydın üzerindeki farede * / .horizontal: target width: 73%; Yükseklik: 230px; .horizontal: target h2 top: 0px; Sol: 0; -webkit-transform: döndürme (0deg); -moz-dönüşümü: döndürme (0deg); -o-dönüşümü: döndürme (0deg); dönüşümü: döndür (0deg);
Yukarıdaki kod, akordeonya uyması için slaydın boyutunu değiştirecektir. Başlık, başlığı aşağı doğru hareket ettirmek için dikey olarak döndürüldü, ancak şimdi slayt açıkken, metni tekrar 0 dereceye döndürerek metni tekrar yatay olacak.
5. Dikey Akordeon
Dikey akordeon, yatay akordeon ile aynı şekilde çalışır; yükseklik onun yerine Genişlik ve metnin hizalamasını değiştirmemize gerek yok.
.dikey bölüm genişlik:% 100; yüksekliği: 40 piksel; -webkit-geçişi: yüksekliği 0.2s kolaylık; -moz-geçiş: yükseklik 0.2s kolaylık; -o-geçiş: yükseklik 0.2s kolaylık; geçiş: yükseklik 0.2s kolaylık; / * Slaytın yüksekliğini ayarlayın * / .vertical: target height: 250px; en: 97%;
Üzerinde hedef dikey akordeon olayı değiştireceğiz yükseklik Slayt gösterisini görüntülemek için.
.dikey bölüm h2 pozisyon: göreceli; Sol: 0; En: -15px; / * Slaytın üzerindeki sayının konumunu ayarla * / .vertical bölümü: after top: -60px; Sol: 810px; .vertical bölüm: target: after left: -9999px;
Yukarıdaki değişecek pozisyon kapalı slayttaki başlık metninin Kapalı slayt ile ayarlamak gerekir pozisyon akordeonun sağ tarafında bulunan numara. Slayt açıkken, hedef ayarlandığında bu numarayı başlığa gizlememiz gerekir, böylece ekranın solundaki konumu değiştiririz.
Şimdi akordeonun başlığına tıkladığınızda, slayt slaydın içeriğini görüntülemek için stil değiştirir.
Editörün Notu: Bu gönderi tarafından yazılmıştır Paul Underwood Hongkiat.com için. Paul, Bristol, UK'den bir PHP Web Geliştiricisidir. Web Geliştirme hakkında dersler yazıyor: temel konular PHP, jQuery, CSS3 ve HTML5. Ayrıca Paulund.co.uk adresinde kullanışlı kod parçacıkları kaydeder..
