إنشاء أكورديون مخصص - مساعدة Webflow

كيفية إضافة عنصر قائمة منسدلة

يحتوي عنصر القائمة المنسدلة على إجراءات مدمجة افتراضية تجعله مفيدًا كأكورديون مخصص — يفتح قائمة منسدلة عند النقر ويغلقها عند النقر على عنصر آخر أو جزء من الصفحة.

يمكنك إضافة عنصر قائمة منسدلة إلى موقعك بالذهاب إلى لوحة الإضافة (A) > العناصر > متقدم وسحب عنصر القائمة المنسدلة إلى اللوحة.

كيفية تغيير أنماط القائمة المنسدلة الافتراضية

لاستخدام القائمة المنسدلة في الأكورديون المخصص، ستحتاج إلى تغيير أنماط عنصر القائمة المنسدلة الافتراضية. على وجه الخصوص، ستحتاج إلى ضبط العرض بحيث تملأ القائمة المنسدلة المساحة بالكامل لعنصرها الأب (أي العنصر الذي يحتوي على الأكورديون المخصص).

لتغيير أنماط القائمة المنسدلة الافتراضية:

1. حدد عنصر القائمة المنسدلة الأب على لوحة المصمم (معطى فئة "عنصر أكورديون" لهذا المثال)
2. اذهب إلى لوحة الأنماط > الحجم
3. اضبط العرض على 100%

كيفية تخصيص مفتاح القائمة المنسدلة

الآن، ستحتاج إلى تخصيص مفتاح القائمة المنسدلة بحيث يملأ عنصره الأب بالكامل ويخفي المحتوى داخل القائمة المنسدلة عندما يكون الأكورديون مغلقًا. قم بتعديل خصائص العرض والارتفاع لمفتاح القائمة المنسدلة:

1. حدد مفتاح القائمة المنسدلة على اللوحة وأعطه فئة (مثل "مفتاح أكورديون")
2. اذهب إلى لوحة الأنماط > التخطيط
3. اضبط العرض على flexbox لملء المساحة الأفقية
4. اضبط المحاذاة على الوسط لمركزة النص عموديًا
5. اذهب إلى لوحة الأنماط > الحجم
6. اضبط قيمة الارتفاع (مثل 80px)

كيفية تنسيق الأكورديون الخاص بك

إذا قمت بمعاينة موقعك ونقرت على الأكورديون، قد تلاحظ أن الأكورديون يفتح، لكن المحتوى الافتراضي يتداخل مع المحتوى المحيط به. يحدث هذا لأن النمط الافتراضي للموضع لقائمة المنسدلة هو مطلق. ستحتاج إلى تغييره بحيث يتوسع المحتوى ويغير العناصر المحيطة.

لتنسيق الأكورديون الخاص بك:

1. حدد عنصر القائمة المنسدلة الرئيسي (مثل "عنصر الأكورديون")
2. انقر على أيقونة "الترس" لفتح إعدادات القائمة المنسدلة وعرض القائمة
3. حدد عنصر قائمة المنسدلة
4. انتقل إلى لوحة النمط > الموضع
5. اضبط الموضع على ثابت
6. حدد عنصر القائمة المنسدلة الرئيسي ("عنصر الأكورديون")
7. انتقل إلى لوحة النمط > الحجم
8. اضبط التجاوز على مخفي

كيفية إنشاء الرسوم المتحركة المخصصة الخاصة بك

قم بإنشاء رسوم متحركة مخصصة تفتح وتغلق الأكورديون المخصص الخاص بك:

• إنشاء الإجراءات الأولية
• تحريك فتح الأكورديون
• تحريك إغلاق الأكورديون

إنشاء الإجراءات الأولية

ستبدأ بإنشاء إجراءين أوليين للأكورديون الخاص بك.

بالنسبة للقائمة المنسدلة:

1. حدد عنصر القائمة المنسدلة ("عنصر الأكورديون")
2. انتقل إلى لوحة التفاعلات > محفز العنصر وأنشئ محفز عنصر جديد
3. اختر فتح القائمة المنسدلة
4. حدد إجراء تحت فتح القائمة
5. اختر بدء الرسوم المتحركة تحت الرسوم المتحركة المخصصة
6. أنشئ رسوم متحركة مؤقتة وسمها (مثل "فتح الأكورديون")
7. أضف إجراءً إلى الرسوم المتحركة الخاصة بك: الحجم تحت متفرقات
8. اضبط كحالة أولية
9. أدخل قيمة الارتفاع (مثل 80px)
10. احفظ

بالنسبة لأيقونة التبديل الخاصة بك:

1. حدد الأيقونة داخل عنصر القائمة المنسدلة
2. أعط الأيقونة فئة (مثل "أيقونة الأكورديون")
3. حدد عنصر القائمة المنسدلة الرئيسي
4. افتح لوحة التفاعلات
5. حدد تفاعل فتح القائمة المنسدلة
6. حرر الرسوم المتحركة المؤقتة ("فتح الأكورديون")
7. حدد الأيقونة ("أيقونة الأكورديون")
8. أضف إجراءً: تدوير تحت التحويل
9. اضبط كحالة أولية
10. اضبط محور z على 0 درجة
11. احفظ

تحريك فتح الأكورديون

لفتح الأكورديون وتدوير الأيقونة:

1. اختر عنصر القائمة المنسدلة الرئيسي
2. افتح لوحة التفاعلات
3. اختر تفاعل فتح القائمة المنسدلة
4. حرر الرسوم المتحركة المؤقتة ("فتح الأكورديون")
5. أضف إجراء: الحجم تحت متفرقات
6. قم بإلغاء تحديد الحالة الأولية
7. أدخل "تلقائي" للارتفاع
8. اختر الأيقونة ("أيقونة الأكورديون")
9. أضف إجراء (في نفس الطابع الزمني): تدوير تحت التحويل
10. اضبط المحور z على 180 درجة
11. احفظ

تحريك إغلاق الأكورديون

لتحريك الإغلاق:

1. اختر عنصر القائمة المنسدلة الرئيسي ("عنصر الأكورديون")
2. افتح لوحة التفاعلات
3. اختر تفاعل فتح القائمة المنسدلة
4. اختر الإجراء تحت إغلاق القائمة
5. اختر بدء الرسوم المتحركة
6. أنشئ رسوم متحركة مؤقتة وسمها (مثل، "إغلاق الأكورديون")
7. أضف إجراء: الحجم تحت متفرقات
8. أدخل قيمة الارتفاع (مثل، 80px)
9. اختر الأيقونة
10. أضف إجراء (نفس الطابع الزمني): تدوير تحت التحويل
11. اضبط المحور z على 0 درجة
12. احفظ

العودة إلى مساعدة ويب فلو