צור אקורדיון מותאם אישית - עזרה של 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. שמור

חזרה לעזרה של webflow