כיצד ליצור מבוססי CSS תוכן

מאמר זה הוא חלק שלנו "HTML5 / CSS3 סדרת הדרכות" - ייעודי כדי לעזור לך לעשות מעצב טוב יותר ו / או מפתח. לחץ כאן כדי לראות מאמרים נוספים מאותה סדרה.

היום של מורה אנחנו הולכים ללמוד איך אנחנו יכולים ליצור אקורדיון תוכן אנכי ואנכי פשוט באמצעות CSS3. ישנם רבים plugins jQuery החוצה כי יכול לעשות את העבודה בשבילך אבל מה אתה עושה אם המבקר יש Javascript כבוי, אז האקורדיון לא יעבוד כראוי. אם האקורדיון שלך הוא רק ב- CSS אז זה יעבוד עבור כל המבקרים שלך.

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

כמו מה שאתה רואה? תן קידוד להתחיל!

1. הכנת HTML ותוכן

כדי להתחיל עם אנחנו הולכים ליצור את HTML עבור האקורדיון.

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

 
 
עלינו
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. כתוביות בעברית. NON VIVIT VLIT ליאו, לשבת amet elementum מייל. ללא שם: פוזות ללא שם: a mi tempus malesuada. תמונה ברזולוציה גבוהה יותר. אליקאם סמפר מוריס לשבת אמט. אתיאם פלאסראט. אליקאם ac לורם,. אתיאם מטריס. אליקו נק,. Nulla consectetur interdum massa, vel porta enim vulputate sed. מאקנס קואם, איגאסטס פלסרט לא, פרינגילה ולוס ארוס. אלמנטים נמים. Phasellus eu erat enim. לחץ כאן כדי לראות את הקובץ בשפה שלך.
 
 
 
שירותים
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. כתוביות בעברית. NON VIVIT VLIT ליאו, לשבת amet elementum מייל. ללא שם: פוזות ללא שם: a mi tempus malesuada. תמונה ברזולוציה גבוהה יותר. אליקאם סמפר מוריס לשבת אמט. אתיאם פלאסראט. אליקאם ac לורם,. אתיאם מטריס. אליקו נק,. Nulla consectetur interdum massa, vel porta enim vulputate sed. מאקנס קואם, איגאסטס פלסרט לא, פרינגילה ולוס ארוס. אלמנטים נמים. Phasellus eu erat enim. לחץ כאן כדי לראות את הקובץ בשפה שלך.
 
 
 
בלוג
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. כתוביות בעברית. NON VIVIT VLIT ליאו, לשבת amet elementum מייל. ללא שם: פוזות ללא שם: a mi tempus malesuada. תמונה ברזולוציה גבוהה יותר. אליקאם סמפר מוריס לשבת אמט. אתיאם פלאסראט. אליקאם ac לורם,. אתיאם מטריס. אליקו נק,. Nulla consectetur interdum massa, vel porta enim vulputate sed. מאקנס קואם, איגאסטס פלסרט לא, פרינגילה ולוס ארוס. אלמנטים נמים. Phasellus eu erat enim. לחץ כאן כדי לראות את הקובץ בשפה שלך.
 
 
 
תיק עבודות
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. כתוביות בעברית. NON VIVIT VLIT ליאו, לשבת amet elementum מייל. ללא שם: פוזות ללא שם: a mi tempus malesuada. תמונה ברזולוציה גבוהה יותר. אליקאם סמפר מוריס לשבת אמט. אתיאם פלאסראט. אליקאם ac לורם,. אתיאם מטריס. אליקו נק,. Nulla consectetur interdum massa, vel porta enim vulputate sed. מאקנס קואם, איגאסטס פלסרט לא, פרינגילה ולוס ארוס. אלמנטים נמים. Phasellus eu erat enim. לחץ כאן כדי לראות את הקובץ בשפה שלך.
 
 
 
איש קשר
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. כתוביות בעברית. NON VIVIT VLIT ליאו, לשבת amet elementum מייל. ללא שם: פוזות ללא שם: a mi tempus malesuada. תמונה ברזולוציה גבוהה יותר. אליקאם סמפר מוריס לשבת אמט. אתיאם פלאסראט. אליקאם ac לורם,. אתיאם מטריס. אליקו נק,. Nulla consectetur interdum massa, vel porta enim vulputate sed. מאקנס קואם, איגאסטס פלסרט לא, פרינגילה ולוס ארוס. אלמנטים נמים. Phasellus eu erat enim. לחץ כאן כדי לראות את הקובץ בשפה שלך.
 
 

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

2. CSS סטיילינג

ראשית אנחנו צריכים סגנון המכיל div של האקורדיון. זה ייתן לנו מושג איך להציג את כל השקופיות ואת כל הכותרות.

 / * הגדרת תיבת אקורדיון * / .accordion width: 830px; overflow: hidden; שוליים: 10px אוטומטי; צבע: # 474747; רקע: # 414141; ריפוד: 10px; 

הבא אנחנו הולכים ליצור את הכותרות עבור כל השקופיות.

 .קטע אקורדיון float: left; overflow: hidden; צבע: # 333; הסמן: מצביע; רקע: # 333; שוליים: 3px; . קטע אקורדיון: רחף רקע: # 444; 

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

 .קטע אקורדיון p display: none; 

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

 .קטע אקורדיון font-size: 24px; צבע: # 000; מודגש; . קטע אקורדיון: nth-child (1): אחרי content: '1'; . קטע אקורדיון: nth-child (2): אחרי content: '2'; . קטע אקורדיון: nth-child (3): אחרי תוכן: '3'; . קטע אקורדיון: nth-child (4): אחרי תוכן: '4'; . קטע אקורדיון: nth-child (5): אחרי תוכן: '5'; 

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

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

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

3. שימוש : יעד בורר מדומה

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

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

 
 
עלינו
 
לורם ipsum dolor לשבת amet, consectetur adipiscing elit. כתוביות בעברית. NON VIVIT VLIT ליאו, לשבת amet elementum מייל. ללא שם: פוזות ללא שם: a mi tempus malesuada. תמונה ברזולוציה גבוהה יותר. אליקאם סמפר מוריס לשבת אמט. אתיאם פלאסראט. אליקאם ac לורם,. אתיאם מטריס. אליקו נק,. Nulla consectetur interdum massa, vel porta enim vulputate sed. מאקנס קואם, איגאסטס פלסרט לא, פרינגילה ולוס ארוס. אלמנטים נמים. Phasellus eu erat enim. לחץ כאן כדי לראות את הקובץ בשפה שלך.
 
 

 .קטע אקורדיון: יעד רקע: #FFF; ריפוד: 10px; . acordion section: target: hover background: #FFF; . acordion section: target h2 width: 100%; . acordion section: target h2 a color: # 333; ריפוד: 0; . acordion section: target p display: block; . אקורדיון סעיף h2 a ריפוד: 8px 10px; בלוק תצוגה; font-size: 16px; משקל גופני: רגיל; צבע: #eee; text-decoration: none; 

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

עכשיו כאשר אתה לוחץ על הכותרת של האקורדיון את השקופית תשנה את הסגנון כדי להציג את התוכן של השקופית.

4. אקורדיון אופקי

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

 .מקטע אופקי רוחב: 5%; גובה: 250px; -מעבר המעבר: 0.2 ס"מ רוחב להקל; -webkit- מעבר: רוחב 0.2s הקלות; -המעבר: 0.2s רוחב הקלות; מעבר: רוחב 0.2s הקלות; 

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

 / * מקם את מספר החלק שקף * /. אופקית: אחרי top: 140px; משמאל: 15px; 

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

 / * כותרת של שקופית סגורה * /. אופקית סעיף h2 -webkit-transform: לסובב (90deg); -Moz-transform: לסובב (90deg); -O-transform: לסובב (90deg); להפוך: לסובב (90deg); רוחב: 240px; מקומות קרובים משמאל: -100 פיקסלים; top: 85px;  / * בעכבר מעל לשקף פתוח * /. Horizontal: target width: 73%; גובה: 230px;  אופקי: h2 יעד top: 0px; משמאל: 0; -webkit-transform: סובב (0deg); -Moz-transform: סובב (0deg); -O-transform: סובב (0deg); להפוך: לסובב (0deg); 

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

5. אקורדיון אנכי

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

 .מקטע אנכי רוחב: 100%; גובה: 40px; -webkit- מעבר: גובה 0.2s הקלות; -מעבר-מעבר: גובה 0.2s הקלות; - מעבר: גובה 0.2s הקלות; מעבר: גובה 0.2s הקלות;  / * קביעת גובה השקף * / .topic: target height: 250px; רוחב: 97%; 

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

 .קטע An exercise משמאל: 0; top: -15px;  / * קבע את המיקום של המספר בשקופית * / .vertical section: after top: -60px; משמאל: 810px; . sectionical section: target: after left: -9999px; 

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

עכשיו כאשר אתה לוחץ על הכותרת של האקורדיון את השקופית תשנה את הסגנון כדי להציג את התוכן של השקופית.

הערת העורך: פוסט זה נכתב על ידי פול אנדרווד עבור Hongkiat.com. פול הוא מפתח אינטרנט PHP מבריסטול, בריטניה. הוא כותב מדריכים על פיתוח אינטרנט: הנושאים העיקריים כוללים PHP, jQuery, CSS3 ו- HTML5. הוא גם רשומות קטעי קוד שימושי ב Paulund.co.uk.