Muhteşem CSS Yalnızca Akordeonları Oluşturmanın 4 Yolu
İçerik akordeonları kullanışlı bir tasarım deseni oluşturur. Bunları birçok farklı şey için kullanabilirsiniz: menüler, listeler, görüntüler, makale alıntıları, metin parçacıkları ve hatta videolar için
Çoğu akordeon orada güveniyor JavaScript, özellikle jQuery'de, ancak gelişmiş CSS3 tekniklerinin kullanımı yaygınlaştığından, güzel örnekler de bulabiliriz. sadece HTML ve CSS kullan, bu özellik onları JavaScript devre dışı bırakılmış ortamlarda erişilebilir kılar.
Yalnızca CSS akordeonları oluşturmak zor bir iş olabilir, bu nedenle bu yazıda deneyeceğiz Geliştiricilerin ihtiyaç duydukları zaman kullandıkları ana kavramları anlama.
Yalnızca CSS sekmeleri oluştururken genellikle iki ana yaklaşım vardır, bunların her birinin iki sık kullanım durumu vardır. İlk yaklaşım kullanır gizli form elemanları, ikincisi ise yararlanırken CSS sözde seçicileri.
1. Radyo Düğmesi Yöntemi
Radyo Düğmesi Yöntemi, akordeonun her sekmesine gizli bir radyo girişi ve karşılık gelen bir etiket etiketi ekler. Mantık basittir: kullanıcı bir sekme seçtiğinde, temelde o sekmeye ait olan radyo düğmesini kontrol eder, aynı şekilde bir formu doldururken. Akordeondaki bir sonraki sekmeyi tıklattıklarında, sonraki radyo düğmesini vb. Seçerler..
Bu yöntemde, sadece bir sekme açılabilir aynı zamanda. HTML'nin mantığı şuna benzer:
İçerik Başlığı (burada h1 etiketi kullanmayın)
Bazı içerikler…
p>
Gerek her sekme için ayrı bir radyo etiketi çifti ekleyin akordeonda. HTML tek başına istenen davranışı vermez, uygun CSS kurallarını da eklemeniz gerekir, hadi nasıl başarabileceğinizi görelim..
Sabit Yükseklikli Dikey Sekmeler
Bu çözümde (aşağıdaki ekran görüntüsüne bakın), geliştirici radyo düğmesini görüntü yok; Kural, ardından her sekmenin başlığını tutan etiket etiketine göreceli bir konum ve karşılık gelenlere mutlak bir konum verdi Etiket: sonra sözde eleman.
İkincisi, sekmeleri açan yeşil + işaretiyle işaretlenmiş tutamacı tutar. Kapalı tırnaklarda yeşil işaretli bir tutamaç da kullanılır “-” işaretler. CSS'de kapalı sekmeler, element + element seçici yardımı ile seçilir..
Ayrıca açık sekmenin içeriğini sabit bir yükseklik vermeniz gerekir. Bunu yapmak için, element1 ~ element2 CSS seçicisinin yardımı ile açık sekmenin gövdesini (yukarıdaki HTML'deki sekme içeriği sınıfı ile işaretlenmiş) seçin..
Buradaki CSS'nin temel mantığı şudur:
giriş [type = radio] ekran: yok; etiket pozisyon: göreceli; Ekran bloğu; etiket: sonra içerik: "+"; pozisyon: mutlak; sağ: 1em; giriş: kontrol + etiket: sonra content: "-"; giriş: kontrol edilmemiş ~ .tab-content height: 150px;
Codepen'deki tüm CSS'ye buradan bakabilirsiniz. CSS başlangıçta Sass ile yazılmıştır, ancak “Derlenmiş Görünüm” düğmesini, derlenmiş CSS dosyasını görebilirsiniz.
Radyo Düğmeli Görüntü Akordeon
Bu güzel görüntü akordeon aynı radyo düğmesi yöntemini kullanır, ancak etiket yerine buradaki geliştirici figcaption HTML etiketini kullandı akordeon davranışını gerçekleştirmek.
CSS biraz farklıdır, çünkü bu durumda sekmeler dikey değil ama yatay olarak yerleştirilmiştir. Geliştirici, kapsanan görüntülerin kenarlarının hala görünür kalmasını sağlamak için element + eleman CSS seçiciyi (önceki durumda geçişleri seçmek için kullanıldı) kullandı..
Bu zarif sadece CSS akordeonunun nasıl oluşturulacağı hakkında ayrıntılı kılavuzu okuyun.
2. Onay Kutusu Yöntemi
Onay kutusu yöntemi, radyo düğmesi yerine onay kutusu giriş türünü kullanır. Kullanıcı bir sekme seçtiğinde, temel olarak ilgili onay kutusunu işaretler..
Radyo düğmesi yöntemine göre fark şu ki Aynı anda birden fazla sekme açmak mümkün, Tıpkı bir form içinde birden fazla onay kutusunu işaretlemenin mümkün olması gibi.
Öte yandan, kullanıcı bir başkasına tıkladığında sekmeler kendi başlarına kapanmayacaktır. HTML mantığı öncekiyle aynıdır, sadece bu durumda giriş türü için onay kutusunu kullanmanız gerekir..
İçerik Başlığı (burada h1 etiketi kullanmayın)
Bazı içerikler…
p>
Sabit Yükseklik Onay Kutusu Akordeon
Sabit yükseklik içerik sekmeleri istiyorsanız, CSS mantığı radyo düğmesi durumundakiyle hemen hemen aynıdır, sadece giriş türü radyodan onay kutusuna değişmiştir. Bu Codepen kaleminde koda bakabilirsiniz.
Sıvı Yüksekliği Onay Kutusu Akordeon
Aynı anda birden fazla sekme açıldığında, sabit yükseklik sekmelerinin görüntülenmesi, akordeon yüksekliği önemli ölçüde artabileceğinden kullanıcı deneyimini olumsuz yönde etkileyebilir. Eğer bu iyileştirilebilir sabit yüksekliği sıvı yüksekliğine değiştirin; bu, açık tırnakların yüksekliğinin, tuttukları içeriğin boyutuna göre genişlemesi veya daralması anlamına gelir..
Bunu yapmak için yapmanız gereken sekme içeriğinin sabit yüksekliğini maksimum yüksekliğe değiştirmek, ve göreceli birimleri kullanmak:
giriş: checked ~ .tab-content maks. yükseklik: 50em;
Bu yöntemin nasıl çalıştığını daha iyi anlamak istiyorsanız, bu Codepen’e bir göz atabilirsiniz..
3.: hedef Yöntemi
: hedef, CSS3'ün sözde seçicilerinden biridir. Onun yardımıyla, bir HTML öğesini aşağıdaki şekilde bağlantı etiketine bağlayabilirsiniz:
Sekmenin Başlığı
Sekmenin İçeriği
Kullanıcı bir sekmenin başlığına tıkladığında, tüm bölüm açılacaktır. :hedef sözde seçici ve URL de aşağıdaki biçimde değiştirilir: www.some-url.com/#tab-1.
Açık sekme, CSS’de bölüm: target … kural. Burada hongkiat ile ilgili güzel CSS akordeonlarını nasıl oluşturabileceğinizle ilgili harika bir eğiticimiz var. :hedef dikey ve yatay düzenlerde yöntem.
Ana eksikliği :hedef yöntem şudur kullanıcı sekmeleri tıkladığında URL’yi değiştirir. Bu, tarayıcı geçmişini etkiler ve tarayıcının geri düğmesi kullanıcıyı önceki sayfaya değil, akordeonun önceki durumuna götürür.
4.: vurgulu Yöntemi
Bu ikinci eksiklikten yararlanırsak, üstesinden gelinebilir : hover CSS sözde seçici yerine :hedef, ancak bu durumda sekmeler tıklamaya değil, hover olayına tepki verir. Buradaki hile, ihtiyacın olan şey. ya da görünmeyen öğeleri gizle, veya genişlik veya yüksekliklerini azaltmak - sekmelerin düzenine bağlı olarak
Akordiyonun çalışması için gezdirilen elemanın görünür olması veya tam genişlik / yüksekliğe ayarlanması gerekir..
Aşağıdaki 3 CSS-sadece akordiyonun tümü: hover metodu ile yapılmıştır, koda bir göz atmak için ekran görüntülerinin altındaki linklere tıklayınız..
Yatay Görüntü Akordeon
Çarpık akordeon
Varsayılan Durumlu Vurgulu Etkin Akordeon
