גלריית תמונות ב CSS בלבד! ע”י שימוש בפסאודו קלאס target

כבר די הרבה זמן אני נתקל באפשריות שימוש בפסאודו קלאס מסוג target. הפסאודו הזה מסמן תגית שפונים אליה מתגית A אחרת. ניתן לפנות לכל תגית שיש לה ID. כביכול נראה דבר מאוד פשוט, אך לפסאודו קלאס הזה יש הרבה כח, הוא בעצם מאפשר לך לתת לתגית מסוימת ערך שונה מלאחרים בדף. בחשיבה תכנותית זה כמו משתנה שאני יכול לגשת אליו (מי מסומן), ולהשתמש בו כדי להציג תגית מסוימת אחרת.רק שה”משתנה” פה יהיה ב CSS!
לא מאמינים! אז הנה – דוגמא לגלריית CSS ללא JS

גיריתי אותכם מספיק, אז בואו נתחיל!


מי שלא מכיר מהם פסאודו קלאס/אלמנט מוזמן לקרוא את הפוסט-“הכל על פסאודו Pseudo Class\Element ב CSS

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

עד פה יצרנו 5 לינקים, ובנוסף 6 containerים של content, אחד לכל אחד, ועוד אחד דיפולטי שישמש אותנו למצב שהמשתמש עוד לא לחץ על אחד מהלינקים.

נכיל עיצוב קל לתפריט של האייטמים, ובנוסף נסתיר את כל האייטמים של content.
CSS – syntax


 

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

 

מה שהוספתי ב CSS אומר, תציג לי תגית LI שקיבלה הפנייה מלינק של התפריט. המצב הדיפולטי של LI של התכנים(content) הוא מוסתר, מה שאומר שרק תגית LI (של content) שהתפריט שלה נלחץ מוצגת.
ממש פשוט! יצרנו בצורה פשוטה תפריט שמציג ומסתיר תכנים ללא שורת JS אחת!.
מה שנשאר, הוא לטפל במה יוצג במצב default,  וגם זה לא מסובך, נצטרך להוסיף את שני שורות הקוד האלו ל CSS שלנו.
CSS – syntax

 

הסבר
  • השורה הראשונה בCSS, מציינת שהתיבת תוכן (מה-content) השישית שלנו ב HTML, שהכנו כבר בהתחלה למצב default, ולא השתמשנו בא עד עכשיו, תופיע גם ששום דבר לא נלחץ.
  • השורה השנייה ב CSS, מציינת שבמידה ואחד האחים הקודמים של אלמנט default (מה-content) , נמצא במצב target, אז יש להסתיר את אלמנט default.
אז הנה מה שאנחנו מקבלים מכל הקוד שכתבנו – דוגמא תפריטים שפותחים את התוכן הרלונטי
 
טוב הבטחתי גלריית תמונות, אז בגדול תחשבו שמה שנשאר לכם, זה להחליף את תוכן הלינקים בתפריטים בתמונות קטנות, את התכנים בתמונות גדולות(את התוכן הדיפולטי בתמונה הראשונה) ויש לכם גלריה, וזהוא!
רוצים לראות דוגמא מוכנה של גלריה בצורה הזו! אז הנה בבקשה, דוגמא לגלריית תמונות בCSS בלבד שאני הכנתי.
חשוב לציין! – פסאודו קלאסס target, הוא פיצר CSS3, ונתמך רק בדפדפנים חדשים, כלומר מאקספלורר 9 ,ושאר הדפדפנים.
על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.
  • כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">