CSS3 İçerik Akordiyon Menü Oluşturma

CSS3 İçerik Akordiyon Menü Oluşturma


 

Futurico UI Pro'ya dayalı saf bir CSS3 içerik akordeonisinin nasıl oluşturulacağını öğreneceğiz. Bu, hedef seçiciyi destekleyen tüm tarayıcılarda ve cihazlarda çalışır.
 
 
Adım 1 - Temel HTML Biçimlendirme
 
 
Diyelim üç bölüm oluşturacağız farklı bir kimliğe sahip ve her div sekmesinin sınıf ve içeriğin sınıfı ile bir div ile bağlantı olacaktır. Akordiyon üzerine tıkladığımızda stil ve açılabilmesi için hedef seçiciyi kullanmamız gerekir . Hedef seçici yalnızca, bir kimliği işaret eden bir bağlantıya sahip olduğumuzda çalışacak ve bu bağlantıya tıkladığımızda kimliği hedef öğe haline gelecektir.

Kodlar:

 

Adım 2 - Akordeon Temel Düzeni
 
 
Tüm kenar boşluklarını, paletleri ve kenarlıkları kaldırmak için CSS sıfırlama stilleri ekleyerek başlayacağız.
 
Kodlar:
 
 
Ardından, sabit bir 300 piksel genişlik (290 piksel + 5 piksel kenar boşluğu + 5 piksel sağ boşluk bırakılıyor.) arka plan rengi, yuvarlatılmış köşeler ve bazı gölgeler veririz .
 
Kodlar:

 

 

 

Adım 3 - Sekme Başlığını Şekillendirmek

 
 
Şimdi, bazı CSS3 degradeleri, gölgeler, yuvarlatılmış köşeler ve bazı temel CSS özellikleri (yazı tipi, dolgu, renk, vb.) Ile varsayılan başlık başlığının stilini oluşturmaya başlayalım .
 
Kodlar:

 

Ve ardından bir fareyle üzerine gelme ve etkin stil eklemeliyiz. Metni ve degrade rengini yeşil bir metin olarak değiştireceğiz.

Kodlar:

 

4. Adım - İçeriği Gösterme ve Gizleme
 
Bu adımda tüm içeriği gizleyeceğiz ve yalnızca bir sekmeyi tıkladığınızda gösterilecek. Gizlemek için ekranı kullanacağız. Ayrıca, daha iyi görünmesi için bazı geçiş animasyonları ve hedef div için 100 piksel yükseklik de ekleyeceğiz.

 

 

5. Adım - Sekmeler İçerik
 
HTML İşaretleme
 
Sekmelere biraz içerik ekleyelim. Paragraf metninin bazı görüntüler ve bazı meta bilgisi ile işaretlemeyi istediğiniz gibi değiştirebilirsiniz. Bu akordiyonun daha eksiksiz hale getirilmesi için.

Kodlar:

 

CSS Stilleri
 
 
İçerik stilleri CSS3 dışında hepsi temel, Google'da anlamadığınız özelliklerde arama yapmanızı öneririm ve bunlarla ilgili çok sayıda bilgiyi bulacaksınız.

Kodlar:

 

Ayrıca div yüksekliğini 360px olarak değiştirin.

Kodlar:

 

 

 YUKARI