4 דרכים ליצור אקורדים מדהימים
אקורדיונים תוכן לעשות דפוס עיצוב שימושי. ניתן להשתמש בהם לדברים רבים ושונים: לתפריטים, לרשימות, לתמונות, לקטעי מאמרים, לקטעי טקסט ואפילו לסרטונים
רוב האקורדיונים שם מסתמכים JavaScript, בעיקר על jQuery, אבל מאז השימוש בטכניקות CSS3 מתקדמות הפך נפוץ, אנו יכולים גם למצוא דוגמאות נחמד כי השתמש ב- HTML ו- CSS בלבד, זה הופך אותם נגישים בסביבות עם JavaScript מושבת.
יצירת אקורדיונים CSS בלבד יכול להיות משימה מסובכת, ולכן בפוסט הזה ננסה להבין את המושגים העיקריים מפתחים להשתמש כאשר הם צריכים ליצור אחד.
ביצירת כרטיסיות CSS בלבד יש בדרך כלל שתי גישות עיקריות, כל אחד מהם יש שני מקרים שימוש תכוף. הגישה הראשונה מנצלת אלמנטים טופס מוסתר, בעוד השני עושה שימוש בוררי פסאודו.
1. שיטת הרדיו
שיטת Radio Button מוסיפה קלט רדיו מוסתר ותגית תווית מתאימה לכל לשונית של האקורדיון. ההיגיון הוא פשוט: כאשר המשתמש בוחר כרטיסייה, הם בעצם בודקים את לחצן הבחירה ששייך לכרטיסייה זו, באותו אופן כאשר הם ממלאים טופס. כאשר הם לוחצים על הכרטיסייה הבאה באקורדיון, הם בוחרים את לחצן הבחירה הבא, וכו '.
בשיטה זו, רק כרטיסייה אחת יכולה להיות פתוחה באותו הזמן. ההיגיון של HTML נראה כך:
כותרת תוכן (אל תשתמש בתג h1 כאן)
חלק מהתוכן ...
p>
אתה צריך הוסף זוג נפרד של תווית רדיו עבור כל כרטיסייה באקורדיון. HTML לבד לא ייתן את ההתנהגות הרצויה, אתה צריך להוסיף את הכללים CSS המתאים מדי, בואו לראות איך אתה יכול להשיג את זה.
קבוע גובה אנכי כרטיסיות
בפתרון זה (ראה את המסך למטה), היזם הסתיר את לחצן הבחירה בעזרת אל תציג דבר; כלל, אז הוא נתן עמדה יחסית לתווית תווית המכילה את הכותרת של כל לשונית, ואת המיקום המוחלט המקביל youа אלמנט פסאודו.
זה האחרון מחזיק את הידית מסומן עם סימן + ירוק פותח את הכרטיסיות. הכרטיסיות הסגורות גם מנצלות ידית המסומנת בירוק “-” שלטים. ב CSS את הכרטיסיות נסגרות נבחרים בעזרת אלמנטים + אלמנט בורר.
אתה גם צריך לתת את התוכן של הכרטיסייה הפתוחה גובה קבוע. כדי לעשות זאת, בחר את הגוף של הלשונית הפתוחה (מסומן בכיתת הכרטיסייה תוכן ב- HTML לעיל) בעזרת בורר element1 ~ element2 CSS.
ההיגיון הבסיסי של CSS כאן הוא כדלקמן:
קלט [type = radio] display: none; תווית (מיקום: יחסית; בלוק תצוגה; תווית: אחרי content: "+"; תפקיד מוחלט right: 1em; קלט: מסומן + תווית: אחרי content: "-"; קלט: מסומנת ~ .tab-content height: 150px;
אתה יכול להסתכל על CSS מלא כאן על Codepen. ה- CSS נכתב במקור ב- Sass, אבל אם תלחץ על “View Compiled” כפתור, אתה יכול לראות את קובץ ה- CSS הידור.
אקורדיון תמונה עם לחצני רדיו
אקורדיון זה תמונה יפה משתמשת באותה שיטת לחצן הבחירה, אבל במקום תוויות, היזם כאן השתמשו בתג HTML figcaption כדי להשיג את התנהגות האקורדיון.
CSS שונה במקצת, בעיקר משום שבמקרה זה הכרטיסיות אינן ממוקמות אנכית אלא אופקית. היזם השתמש במרכיב CSS + element CSS (שהשתמש בו במקרה הקודם כדי לבחור את החצוצרות) כדי להבטיח שקצוות התמונות המכוסות יישארו גלויים.
קרא את המדריך מפורט על איך ליצור זה אקורדיון CSS אלגנטי בלבד.
2. שיטת תיבת הסימון
שיטת תיבת הסימון משתמשת בסוג הקלט של תיבת הסימון במקום בלחצן הבחירה. כאשר המשתמש בוחר כרטיסייה, הם בעצם בודקים את תיבת הסימון המתאימה.
ההבדל לעומת שיטת הרדיו הוא כי זה ניתן לפתוח יותר מכרטיסייה אחת בו-זמנית, בדיוק כמו שאפשר לבדוק יותר מתיבת תיבות אחת בתוך טופס.
מצד שני, הכרטיסיות לא ייסגרו בעצמן כאשר המשתמש לוחץ על כרטיס אחר. ההיגיון של ה- HTML הוא זהה לזו, רק במקרה זה אתה צריך להשתמש בתיבת הסימון עבור סוג קלט.
כותרת תוכן (אל תשתמש בתג h1 כאן)
חלק מהתוכן ...
p>
קבוע גובה תיבת הסימון
אם אתה רוצה קבוע תוכן גובה הכרטיסיות, את ההיגיון של CSS הוא די הרבה כמו במקרה של לחצן הבחירה, זה רק סוג הקלט השתנה מ הרדיו לתיבת הסימון. בעט זה Codepen אתה יכול להעיף מבט על הקוד.
תיבת גובה נוזלים
כאשר יותר מכרטיסיות אחת פתוחות בו-זמנית, הצגת כרטיסיות גובה קבועות עלולה להשפיע לרעה על חוויית המשתמש, שכן גובה האקורדיון יכול לגדול באופן משמעותי. זה יכול להיות משופר אם לשנות את גובה קבוע לגובה הנוזל; זה אומר את הגובה של הכרטיסיות הפתוחות להרחיב או להתכווץ בהתאם לגודל של התוכן שהם מחזיקים.
לשם כך עליך לשנות את הגובה הקבוע של תוכן הכרטיסייה לגובה מרבי, ו לנצל יחידות יחסיתYou
קלט: מסומנת ~ .tab-content max-height: 50em;
אם אתה רוצה להבין טוב יותר איך שיטה זו פועלת, אתה יכול להעיף מבט זה Codepen.
3. שיטת היעד
: היעד הוא אחד מהבחירה המדומה של CSS3. בעזרתו תוכל לקשר אלמנט HTML לתג עוגן באופן הבא:
כותרת הכרטיסייה
תוכן הכרטיסייה
כאשר המשתמש לוחץ על הכותרת של הכרטיסייה, כל הקטע יפתח הודות : יעד pseudo-selector, וכתובת האתר תשתנה גם לפורמט הבא: www.some-url.com/#tab-1.
הכרטיסייה פתוחה יכול להיות מנוסח ב- CSS בעזרת קטע: יעד ... הכלל. יש לנו הדרכה נהדרת כאן על hongkiat על איך אתה יכול ליצור נחמד אקורדיונים CSS בלבד עם : יעד בשיטות אנכיות ואופקיות.
החסרון העיקרי של : יעד השיטה היא זו הוא משנה את כתובת האתר כאשר המשתמש לוחץ על הכרטיסיות. הדבר משפיע על היסטוריית הדפדפן והכפתור הקודם של הדפדפן לא ייקח את המשתמש לדף הקודם, אלא למצב הקודם של האקורדיון.
4. שיטה: ריחוף
זה החסרון האחרון ניתן להתגבר אם נשתמש : רחף CSS pseudo-selector במקום : יעד, אבל במקרה זה הכרטיסיות לא יגיבו לקליק, אלא לאירוע ריחוף. הטריק כאן הוא שאתה צריך או להסתיר את האלמנטים unhovered, או להפחית רוחב או גובה - בהתאם לפריסה של הכרטיסיות
אלמנט מרחף צריך להיות גלוי, או להגדיר רוחב מלא / גובה על מנת לעשות את העבודה אקורדיון.
הבא 3 אקורדיונים CSS בלבד היו כל עשה עם: לרחף שיטה, לחץ על הקישורים מתחת צילומי מסך כדי להעיף מבט על הקוד.
תמונה אקורדיון אופקי
אקורדיון מוטה
מרחף עם אקורדיון עם מצב ברירת המחדל
