אם אתם קוראים את הפוסט הזה אני בטוח כמעט בוודאות שכשאני אדבר על "תפריט טאבים" (UI Tabs Menu) אתם תדעו מיד על מה אני מדבר. עד לפני כמה שבועות אם הייתם מדברים איתי על יצירה של תפריט טאבים הייתי אומר לכם לחפש איזשהוא פלאגין jQuery קיים, אולי אפילו להשתמש בטאבים שjQuery מספקים בסט הכלים שלהם – "jQuery UI". אתם יודעים מה? יש מצב שאפילו הייתי כותב על זה מדריך כאן בבלוג. אבל היום אני רוצה לקחת אתכם לכיוון קצת שונה בפיתוח תפריט טאבים מהסוג הזה. בפוסט-מדריך הזה אני הולך להסביר איך ליצור תפריט טאבים בעזרת כמה שורות HTML וCSS3 בלבד.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<article class="tabs">
    <section id="tab1">
        <a href="#tab1">Tab 1</a>
        <div>
            <h2>Tab 1 title</h2>
            <p>Lorem Bla bla...</p>
        </div>
    </section>
    <section id="tab2">
        <a href="#tab2">Tab 2</a>
        <div>
            <h2>Tab 2 title</h2>
            <p>Lorem Bla bla...</p>
        </div>
    </section>
    <section id="tab3"><a href="#tab3">Tab 3</a>
        <div>
            <h2>Tab 3 title</h2>
            <p>Lorem Bla bla...</p>
        </div>
    </section>
</article>

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

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

1
2
3
4
5
6
7
8
9

<section id="tab1">
    <a href="#tab1">Tab 1</a>
    <div>
        <h2>Tab 1 title</h2>
        <p>
            Lorem Bla bla...
        </p>
    </div>
</section>

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

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

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

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

1
2
3
4
5
6

article.tabs {
    width: 550px;
    position: relative;
    margin: 80px auto 0;
    text-align: left;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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;
}

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

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

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

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

1
2
3

li:nth-child(4) {
    color: red;
}

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

1
2
3
4
5
6
7
8
9

/* 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;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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;
}

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

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

1

<div id="pickMe"></div>

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

1

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

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

1
2
3

article.tabs section:target > div {
    display: block;
}

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

1
2
3

article.tabs section:target > a {
    background: #fff;
}

וזה הכל! פשוט נכון? ככה זה יראה בסוף (עם עוד כמה תוספות משלי..)

לחצו כדי לראות

אהבתם את המדריך? פרגנו בלייק ושתפו עם חברים! יש לכם שאלות? אשמח לענות לכם בתגובות.

כתיבת תגובה לבטל