כיצד ליצור תפריט טאבים בעזרת CSS3 בלבד [מדריך]

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

מקור: דניאל שטרנליכט

אם אתם קוראים את הפוסט הזה אני בטוח כמעט בוודאות שכשאני אדבר על “תפריט טאבים” (UI Tabs Menu) אתם תדעו מיד על מה אני מדבר.

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

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

בואו נתחמם בקצת HTML5 פשוט:

[code]

Tab 1

Tab 1 title

Lorem Bla bla…

Tab 2

Tab 2 title

Lorem Bla bla…

Tab 3

Tab 3 title

Lorem Bla bla…

[/code]

מעבר זריז על הHTML שיצרתי יתן לכם תמונה מאוד כללית על מה שהולך כאן. עטפתי את הקוד בתגית ARTICLE – תגית תוכן בHTML5 שמסמנת מיקום של מאמר. הוספתי לתגית גם class בשם “tabs” כדי שיהיה לי קל לגשת אליו אח”כ. למה class ולא ID? כי אני רוצה להתחשב גם במקרה ויש יותר מתפריט טאבים אחד בעמוד.

כל טאב מורכב משורות הקוד הבאות:

[code]

Tab 1

Tab 1 title

Lorem Bla bla…

[/code]

התגית SECTION מייצגת במקרה שלנו את מה שעוטף כל טאב. שימו לב שהוספתי לתגית גם ID שמייצג כל טאב בפני עצמו. בתוך כל SECTION תוכלו למצוא שני דברים חשובים: הראשון, תגית A עם קישור Hashtag לטאב בו הוא נמצא (בהמשך אני אסביר מה המטרה של זה), השני: תגית DIV שמכילה אתה התוכן של אותו הטאב.

כדי שזה יהיה אפילו יותר ברור הכנתי סקיצה קטנה שממחישה מבנה בסיסי של טאב:

אחרי שהבנו את ה-HTML, בואו נמשיך ל-CSS

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

[code]

article.tabs {

width: 550px;

position: relative;

margin: 80px auto 0;

text-align: left;

}

[/code]

הדבר הבא שאני אעשה הוא לעצב ולמקם את האלמנטים שמרכיבים את תפריט הטאבים שלנו:

[code]

article.tabs section > a {

position: absolute;

left: 0;

top: -32px;

z-index: 3;

background: linear-gradient(top, #e7e7e7 0%,#c7c7c7 100%);

opacity: 0.5;

border-radius: 5px 5px 0 0;

border: 1px solid #c7c7c7;

box-shadow: inset 0 1px 0 #fff;

border-bottom: none;

text-decoration: none;

color: #707070;

font-family: “Bree Serif”, Georgia, serif;

font-size: 14px;

display: inline-block;

padding: 5px 40px;

}

[/code]

נתחיל מהסלקטור עצמו. אם אתם לא מכירים, המשמעות של הסימן “<” בסלקטורים של CSS היא: “צאצא ישיר” מה שאומר שבמקרה שלנו שהסלקטור הזה ישפיע אך ורק על תגית “a”, שמיקומה הוא ישירות תחת אלמנט מסוג SECTION בתוך האלמנט שעוטף את הטאבים.

את הסטיילים עצמם שננתי לתפריט מיותר להסביר – רובם משפיעים על העיצוב עצמו של פריט התפריט. מה שכן שווה להזכיר, זה את המיקום האבסולוטי שננתי לכל אחד מהם, את ה-Top position ואת ה-Left position.

שימו לב שלתפריט הטאב השני אני אצטרך לתת Left position גבוה יותר, ואותו כנ”ל לטאב הבא אחריו – כדי שלא יעלו אחד על השני. אני אעשה זאת בעזרת סלקטור חדש של CSS3.

הסלקטור “:nth-child(n)” מאפשר לי לבחור אלמנט מסוים לפי המיקום שלו לפי הסדר. לדוגמא, אם ברשימה מסוימת אני ארצה לבחור את הפריט הרביעי ברשימה, הסלקטור שאני אבחר יהיה:

[code]

li:nth-child(4) {

color: red;

}

[/code]

בחזרה לתפריט הטאבים שלנו, ה-CSS שנצטרך להוסיף יראה ככה:

[code]

/* The second tab menu item */

article.tabs section:nth-child(2) > a {

left: 115px;

}

/* The third tab menu item */

article.tabs section:nth-child(3) > a {

left: 230px;

}

[/code]

הדבר האחרון שנעשה לפני שנגיע ללב הטאבים יהיה לתת סטייל לאלמנט ה-DIV שנמצא בתוך כל אחד מהטאבים – זה האלמנט שיכיל את התוכן של הטאב. ה-CSS שלו יראה ככה:

[code]

article.tabs section > div {

background: #fff;

border: 1px solid #c7c7c7;

border-bottom: 2px solid #07abea;

font-size: 13px;;

border-radius: 0 5px 5px 5px;

width: 510px;

height: 300px;

padding: 20px;

position: absolute;

left: 0;

top: 0;

display: none;

}

[/code]

הפעם, מכיוון שנרצה שהתכנים של הטאבים יעלו אחד על השני ניתן לכולם את אותו מיקום אבסולוטי – 0 מלמעלה ו-0 משמאל. חוץ מזה, נרצה גם להחביא את כולם בעזרת “display: none;” כך שבכל פעם יתגלה בפנינו רק הטאב שבחרנו – מה שמביא אותנו ללב-ליבו של המדריך הזה:

כיצד נגרום לטאב שעליו לחצנו בתפריט, להיפתח?

אחד מהסלקטורים היותר מעניינים ש-CSS3 מציע לנו הוא הסלקטור “:target”. הסלקטור הזה מאפשר לנו לתת סטיילים לאלמנט ש”נבחר”. ה”בחירה” הזאת של האלמנט תיעשה על ידי קישור מאפיין ה-“href” של הקישור ל-ID של האלמנט שנרצה לבחור. לדוגמא: יש לנו DIV עם ID “pickMe”

[code]

<a href=”#pickMe”></a>

[/code]

כדי לבחור אותו, ניצור תגית “a” וניתן לה את ה-ID של האלמנט בתור ה”href” שלו:

[code]

[/code]

בחזרה לקוד שלנו, כדי להשפיע על הטאב הנבחר נוכל להשתמש בסלקטור הזה בצורה הבאה:

[code]

article.tabs section:target > div {

display: block;

}

[/code]

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

[code]

article.tabs section:target > a {

background: #fff;

}

[/code]

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

הפוסט פורסם לראשונה בבלוג Graphic & Technology.

דניאל שטרנליכט

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

הגב

12 תגובות על "כיצד ליצור תפריט טאבים בעזרת CSS3 בלבד [מדריך]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
ד
Guest

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

דניאל שטרנליכט
Guest

מוזר מאוד מה שאתה אומר, באיזה דפדפן זה קורה לך?

ירון
Guest

הנושא הזה של LTR בקטע קוד קצת יותר מדאיג מטאבים ב CSS3 (לא שזו אשמתך)

דניאל שטרנליכט
Guest

מסכים איתך לגמרי. זו איזושהיא בעיה בפלאגין שהותקן פה.

שי בן משה
Guest

נחמד מאוד!
באיזה דפדפנים זה תומך?

דניאל שטרנליכט
Guest

פיירפוקס, כרום וIE9 (ומעלה.. כשיהיה..)

Avner Cohen
Guest

הכיוון כמובן נחמד (אם כי זהה לגישה המוצגת כאן: http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html#tab1)
לדעתי גישה מאוד בעייתית, השימוש במיקום אבסולוטי של הכותרות מייצר קוד שביר מאוד.

אלטרנטיבה מוצגת כאן:
https://gist.github.com/2502435

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

דניאל שטרנליכט
Guest

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

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

Avner Cohen
Guest

גישה זהה למה שהוצג כאן:
http://www.sitepoint.com/css3-tabs-using-target-selector/

לדעתי בעייתית מאוד, מבוסס על מיקום אבסולוטי של הכותרות.
קצת שיחקתי עם הקוד, יצרתי משהו שלא דורש מיקום אבסולוטי כאן:
https://gist.github.com/2502435

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

Avner Cohen
Guest

גישה זהה למה שהוצג כאן:
http://www.sitepoint.com/css3-tabs-using-target-selector/

לדעתי בעייתית מאוד, מבוסס על מיקום אבסולוטי של הכותרות.
קצת שיחקתי עם הקוד, יצרתי משהו שלא דורש מיקום אבסולוטי כאן:
https://gist.github.com/2502435

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

אבנר כהן
Guest

גישה זהה למה שהוצג כאן:
http://www.sitepoint.com/css3-tabs-using-target-selector/

לדעתי בעייתית מאוד, מבוסס על מיקום אבסולוטי של הכותרות.
קצת שיחקתי עם הקוד, יצרתי משהו שלא דורש מיקום אבסולוטי כאן:
https://gist.github.com/2502435

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

Avner Cohen
Guest

הפתרון פה, מבוסס על CSS טהור ונקי מאוד.
מבוסס על ה :checked במקום על :target, פתרון יפה ונקי:
http://css-tricks.com/functional-css-tabs-revisited/

(סליחה על הכפילות של התגובות הקודמות).

wpDiscuz

תגיות לכתבה: