אקורדיוני CSS נמצאים בשימוש נרחב עבור תפריטים הניתנים להרחבה ומתקפלת, קטעים, תמונות, סרטונים, שאלות נפוצות, רשימות וקטעי מאמרים. אתה יכול ליצור אותם בקלות באמצעות HTML, CSS ו-JavaScript (או jQuery). יצירת אקורדיונים ב-CSS בלבד היא משימה מעט מאתגרת, אבל היא מועילה במיוחד בסביבות מושבתות JavaScript.

במדריך זה תלמדו גישה שלב אחר שלב ליצירת אקורדיון CSS בלבד.

בניית אקורדיון בסיסי באמצעות HTML בלבד

אם העדיפות שלך היא יצירת אקורדיון נגיש באמצעות HTML, ה ו תגים הם הדרך ללכת. זה לא משנה באיזו שפת תכנות אתה משתמש, האקורדיון של HTML בלבד יישאר שלם. ליצור תייג כהורה והזן את השאלה ב-a תָג. כתוב תשובה תיאורית בתוך א תָג. חזור על התהליך עבור כל מספר של שאלות נפוצות.

שאלות נפוצות 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!






שאלות נפוצות 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates consequatur. 





instagram viewer







שאלות נפוצות 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

עיצוב האקורדיון

אתה יכול לסגנן את האקורדיון על ידי כוונון צבע רקע, גבול-רדיוס, שולים, ריפוד, וכו.

גוף {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', ז'נבה, Verdana, sans-serif;
 רוחב מקסימלי: 30 רם;
 שוליים: 1.5 רמ אוטומטי;
}
סיכום {
 משקל גופן: 600;
 צבע: rgb (255, 255, 255);
 צבע רקע: rgb (7, 185, 255);
 ריפוד: 1.2 רם;
 שוליים-תחתית: 1.2 רם;
 רדיוס הגבול: 0.5 רם;
 סמן: מצביע;
}

תְפוּקָה:

המגבלה היחידה היא שלא תהיה לך שליטה על כל חלק וחלק של הקוד. ניתן לשנות את מבנה ה-HTML, אך לא ניתן ליצור אקורדיון מותאם אישית. לכן, בואו נבנה מדור שאלות נפוצות מותאם אישית באמצעות CSS מתקדם.

בנה את מדור השאלות הנפוצות המותאם אישית שלך

ישנן שתי שיטות פופולריות ליצירת אקורדיון מותאם אישית CSS בלבד. אתה יכול להשתמש בתיבות סימון או לחצני בחירה; נסביר את שתי השיטות.

שימוש בשיטת תיבת הסימון

שיטת הסימון משתמשת תיבת סימון כסוג הקלט. בכל פעם שמשתמש בוחר כרטיסייה, הוא מסמן את תיבת הסימון והיא נפתחת. אתה יכול לפתוח מספר כרטיסיות בו זמנית באמצעות שיטת הסימון, בדומה לאופן שבו אתה יכול לסמן יותר מתיבת סימון אחת בתוך טופס HTML.

HTML

אקורדיון מותאם אישית CSS בלבד (שאלות נפוצות)

שימוש בשיטת תיבת סימון






איך בונים אקורדיון מותאם אישית באמצעות CSS בלבד?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 assumenda a, nesciunt eum nobis eaque, exercitationem distinctio alias ullam quia. Corrupti beatae
 necessitatibus nihil.









כיצד לשנות את הגובה של פסאודו-אלמנטים?


 Temporibus vel dolore nam dolorem similique voluptatum. אליקוום, דולור et! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero incidunt
 reprehenderit facere ex hic ipsa odit in! Eveniet.

CSS כללי

החל את ה-CSS הבסיסי על הגוף.

גוף {
 צבע: #502c2c;
 רקע: #f1edec;
 ריפוד: 1.2 רם;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 רוחב מקסימלי: 45 רם;
 שוליים: 0 אוטומטי;
 גודל גופן: 1.2 רם;
}

עיצוב האקורדיון

ראשית, הסתר את תיבות הסימון על ידי שינוי הקלט.

/* הסתרת תיבות הסימון או לחצן הבחירה*/
קלט {
 מיקום: מוחלט;
 אטימות: 0;
 z-index: -1;
}

עכשיו, סגנון את האקורדיון. אתה יכול להוסיף::לאחר פסאודו-אלמנט עבור ה + סִימָן. אתה יכול להתייחס לא תרשים ייחוס של ישות אופי ולהשתמש בכל מחשבון המרת ישות כדי למצוא את ערך ה-CSS של ערך מספרי. כאן, ערך ה-CSS של + הוא \002B.

/* סגנונות אקורדיון */
.שאלות נפוצות {
 צבע: #ffe3e3;
 margin-bottom: 3rem;
}
.faq-label {
 גודל גופן: 1.5 רם;
 תצוגה: flex;
 align-items: center;
 להצדיק-תוכן: רווח-בין;
 ריפוד: 1em;
 רקע: #b61818;
 מודגש;
 סמן: מצביע;
 בחר משתמש: אין;
}
.faq-label:: אחרי {
 תוכן: '\002B';
 ריפוד: 0.51 רם;
 טרנספורמציה: קנה מידה (1.8);
 יישור טקסט: מרכז;
 מעבר: כל 0.35 שניות;
}
.faq-content {
 גובה מקסימלי: 0;
 ריפוד: 0 1em;
 צבע: #2c3e50;
 רקע: לבן;
 מעבר: כל 0.35 שניות;
 אל תציג דבר;
}

כעת, בואו נוסיף פונקציונליות לאקורדיון באמצעות סמוכים ובוררי תכונות. פה, \2013 הוא ערך CSS עבור –, הערך המספרי המייצג –.

קלט: מסומן + .faq-label {
 רקע: #8f1414;
}
קלט: מסומן + .faq-label:: לאחר {
 תוכן: '\2013';
 טרנספורמציה: קנה מידה (1.5);
}
קלט: מסומן ~ .faq-content {
 גובה מקסימלי: 100Vh;
 ריפוד: 1em;
 בלוק תצוגה;
 מעבר: כל 0.35 שניות;
}

תְפוּקָה:

שימוש בשיטת כפתור הרדיו

לשיטת לחצן הרדיו יש סוג קלט מוגדר ל רָדִיוֹ. בכל פעם שהמשתמש לוחץ על כרטיסייה, כפתור הבחירה הנסתר המתאים לאותה כרטיסייה נפתח. כאשר אתה לוחץ על הכרטיסייה הבאה, הכרטיסייה הקודמת נסגרת באופן מיידי. אתה יכול לפתוח רק כרטיסייה אחת בכל פעם באמצעות שיטת לחצן הרדיו.

HTML

אקורדיון מותאם אישית CSS בלבד (שאלות נפוצות)

שימוש בשיטת כפתור הרדיו






איך יוצרים אקורדיון בשיטת הרדיו כפתור?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officiis odio repellendus.









כיצד ליצור אקורדיון מותאם אישית באמצעות CSS בלבד?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! אילו סנט placeat officiis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









מה המשמעות של סגנון אקורדיון?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officiis voluptas? ובכן, לא!









סגור הכל ×

CSS

העתק את ה-CSS שלעיל של שיטת הסימון מכיוון ששתי השיטות שונות מנקודת מבט מבנית בלבד. אולי תשים לב שיש כרטיסייה אחת פתוחה כל הזמן. זה קורה מכיוון שאינך יכול לבטל את הסימון של לחצני בחירה כמו תיבות סימון. כדי להשיג זאת, הוסף את קוד ה-CSS שלהלן ללחצן הבחירה "סגור הכל" ללא כל תיאור.

/* סוגר הכל */
.faq-label {
 עמדה: קרוב משפחה;
}
.faq-close {
 תצוגה: בלוק מוטבע;
 ריפוד: 1rem;
 גודל גופן: 1rem;
 רקע: #b61818;
 סמן: מצביע;
 מיקום: מוחלט;
 שמאל: 64rem;
}

תְפוּקָה:

המשך להתנסות ולהוסיף אנימציות

יש היגיון פשוט מאחורי אקורדיונים: כשאתה לוחץ על תפריט, התוכן הנסתר שלו יופיע. מכיוון שאתה יודע עכשיו איך ליצור אקורדיון, הגיע הזמן ליישם ולהתנסות בלמידה שלך. אתה יכול לבנות אקורדיונים אופקיים כדי לשפר את העיצוב, במיוחד בעת הצגת תמונות. נסה עם הקוד על ידי התאמת אפקט המעבר באמצעות אנימציות של פריים מפתח.

נאינסי מוריה (16 מאמרים שפורסמו)

Naincy מתמחה בבניית אתרים רספונסיביים במיוחד ואסטרטגיית תוכן יעילה יחד עם עותקי אינטרנט. היא סופרת טכנולוגית עצמאית ששומרת עין חדה על טכנולוגיות טרנדיות.

עוד מאת Naincy Mourya