Özel bir akordeon oluşturma - Webflow yardımı

Açılır menü öğesi nasıl eklenir

Açılır menü öğesi, varsayılan yerleşik eylemleri sayesinde özel bir akordeon olarak kullanışlıdır — tıklandığında açılır listeyi açar ve sayfanın farklı bir öğesi veya kısmı tıklandığında kapatır.

Sitenize bir açılır menü öğesi eklemek için Ekle paneli (A) > Öğeler > Gelişmiş bölümüne gidip açılır menü öğesini tuval üzerine sürükleyebilirsiniz.

Varsayılan açılır menü stilleri nasıl değiştirilir

Özel akordeonunuzda açılır menüyü kullanmak için varsayılan açılır menü öğesi stillerini değiştirmeniz gerekecek. Özellikle, açılır menünün, ebeveyn öğesinin (yani, özel akordeonu tutan herhangi bir öğe) alanını tamamen doldurması için genişliği ayarlamanız gerekecek.

Varsayılan açılır menü stillerini değiştirmek için:

1. Tasarımcı tuvalinde ebeveyn açılır menü öğesini seçin (bu örnek için “Akordeon öğesi” sınıfı verilmiştir)
2. Stil paneli > Boyut bölümüne gidin
3. Genişlik değerini %100 olarak ayarlayın

Açılır menü geçişinizi nasıl özelleştirebilirsiniz

Şimdi, açılır menü geçişinizi özelleştirmeniz gerekecek, böylece ebeveyn öğesini tamamen doldurur ve akordeon kapalıyken açılır liste içindeki içeriği gizler. Açılır menü geçişinin görüntüleme ve yükseklik özelliklerini ayarlayın:

1. Tuvaldeki açılır menü geçişini seçin ve ona bir sınıf verin (örneğin, “Akordeon geçişi”)
2. Stil paneli > Düzen bölümüne gidin
3. Görüntüleme değerini yatay alanı doldurmak için flexbox olarak ayarlayın
4. Metni dikey olarak ortalamak için Hizala değerini orta olarak ayarlayın
5. Stil paneli > Boyut bölümüne gidin
6. Bir Yükseklik değeri ayarlayın (örneğin, 80px)

Akkordeonunuzu Nasıl Şekillendirirsiniz

Sitenizi önizleyip akordeonunuza tıkladığınızda, akordeonun açıldığını ancak varsayılan içeriğin çevresindeki içeriği kapladığını fark edebilirsiniz. Bu, açılır liste için varsayılan konum stilinin mutlak olmasından kaynaklanır. İçeriğin genişlemesi ve çevresindeki öğeleri kaydırması için bunu değiştirmek isteyeceksiniz.

Akkordeonunuzu şekillendirmek için:

1. Ana açılır öğeyi seçin (örneğin, “Akkordeon öğesi”)
2. Dişli simgesine tıklayarak Açılır Ayarları açın ve Menüyü gösterin
3. Açılır liste öğesini seçin
4. Stil paneline gidin > Konum
5. Konumu statik olarak ayarlayın
6. Ana açılır öğeyi seçin (“Akkordeon öğesi”)
7. Stil paneline gidin > Boyut
8. Taşmayı gizli olarak ayarlayın

Özel Animasyonunuzu Nasıl Oluşturursunuz

Özel akordeonunuzu açıp kapatan bir özel animasyon oluşturun:

• Başlangıç eylemleri oluşturun
• Akordeon açılmasını animasyonla
• Akordeon kapanmasını animasyonla

Başlangıç Eylemleri Oluşturun

Akordeonunuz için iki başlangıç eylemi oluşturarak başlayacaksınız.

Açılır listeniz için:

1. Açılır öğeyi seçin (“Akkordeon öğesi”)
2. Etkileşimler paneline gidin > Öğe tetikleyici ve yeni bir öğe tetikleyici oluşturun
3. Açılır liste açılır seçeneğini seçin
4. Menü açılır altında bir eylem seçin
5. Özel animasyon altında Bir animasyon başlat seçin
6. Zamanlanmış bir animasyon oluşturun ve adlandırın (örneğin, “Akkordeon açılır”)
7. Animasyonunuza bir eylem ekleyin: Boyut altında Çeşitli
8. Başlangıç durumu olarak ayarlayın
9. Bir yükseklik değeri girin (örneğin, 80px)
10. Kaydedin

Geçiş simgeniz için:

1. Açılır öğe içindeki Simgeyi seçin
2. Simgenize bir sınıf verin (örneğin, “Akkordeon simgesi”)
3. Ana açılır öğeyi seçin
4. Etkileşimler panelini açın
5. Açılır liste açılır etkileşimini seçin
6. Zamanlanmış animasyonu düzenleyin (“Akkordeon açılır”)
7. Simgeyi seçin (“Akkordeon simgesi”)
8. Eylem ekleyin: Döndür altında Dönüştür
9. Başlangıç durumu olarak ayarlayın
10. z-eksenini 0 derece olarak ayarlayın
11. Kaydedin

Akkordeon Açılışını Animasyonla

Akkordeonu açmak ve simgeyi döndürmek için:

1. Üst açılır menü öğesini seçin
2. Etkileşimler panelini açın
3. Açılır menü açılır etkileşimini seçin
4. Zamanlanmış animasyonu düzenleyin (“Akkordeon açılır”)
5. Çeşitli altında Boyut eylemi ekleyin
6. Başlangıç durumunu kaldırın
7. Yükseklik için “otomatik” girin
8. Simgeyi seçin (“Akkordeon simgesi”)
9. Aynı zaman damgasında eylem ekleyin: Döndür altında Dönüştür
10. z-ekseni için 180 derece ayarlayın
11. Kaydedin

Akkordeon Kapanışını Animasyonla

Kapanışı animasyonla yapmak için:

1. Üst açılır menü öğesini seçin (“Akkordeon öğesi”)
2. Etkileşimler panelini açın
3. Açılır menü açılır etkileşimini seçin
4. Menü kapanır altında eylemi seçin
5. Animasyonu başlat seçeneğini seçin
6. Zamanlanmış animasyon oluşturun ve adlandırın (örneğin, “Akkordeon kapanır”)
7. Çeşitli altında Boyut eylemi ekleyin
8. Yükseklik değeri girin (örneğin, 80px)
9. Simgeyi seçin
10. Aynı zaman damgasında eylem ekleyin: Döndür altında Dönüştür
11. z-ekseni için 0 derece ayarlayın
12. Kaydedin

Webflow yardımına geri dön