יצירת לשוניות רספונסיביות (Tabs) עם CSS בלבד

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

עם זאת, אין להשתמש בפתרונות אלו ללא חשיבה על נגישות. במרבית המקרים CSS טהור אינו מתחשב בבעלי מוגבליות ואלו כנראה ויתקשו להבין את האלמנט המוצג וכיצד להשתמש בו. עוד על כך ניתן לקרוא בפוסט Accecible tab panel sytem של Nicolas Hoffmann.

הפוסט הבא לגמרי מתורגם מהפוסט Completely CSS: Tabs של Kenan Yusuf.

יצירת המבנה של ה Tabs

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

<div class="tabs">
    
    <input class="input" name="tabs" type="radio" id="tab-1" checked="checked"/><label class="label" for="tab-1">תווית א</label>
    <div class="panel">
        <h1>פאנל א׳</h1>
        <p>לורם איפסום דולור סיט אמט, קונסקטורר אדיפיסינג אלית. סת אלמנקום ניסי נון ניבאה. דס איאקוליס וולופטה דיאם.
            וסטיבולום אט דולור, קראס אגת לקטוס וואל אאוגו וסטיבולום סוליסי טידום בעליק. קונדימנטום קורוס בליקרה, נונסטי
            קלובר בריקנה סטום, לפריקך תצטריק לרטי.
        </p>
        <p>הועניב היושבב שערש שמחויט - שלושע ותלברו חשלו שעותלשך וחאית נובש ערששף. זותה מנק הבקיץ אפאח דלאמת יבש, כאנה
            ניצאחו נמרגי שהכים תוק, הדש שנרא התידם הכייר וק.
        </p>
    </div>
    
    <input class="input" name="tabs" type="radio" id="tab-2"/><label class="label" for="tab-2">תווית ב</label>
    <div class="panel">
        <h1>פאנל ב׳</h1>
        <p>ושבעגט ליבם סולגק. בראיט ולחת צורק מונחף, בגורמי מגמש. תרבנך וסתעד לכנו סתשם השמה - לתכי מורגם בורק? לתיג
            ישבעס.
        </p>
        <p>קוואזי במר מודוף. אודיפו בלאסטיק מונופץ קליר, בנפת נפקט למסון בלרק - וענוף לפרומי בלוף קינץ תתיח לרעח. לת
            צשחמי צש בליא, מנסוטו צמלח לביקו ננבי, צמוקו בלוקריה שיצמה ברורק.
        </p>
    </div>
    
    <input class="input" name="tabs" type="radio" id="tab-3"/><label class="label" for="tab-3">תווית ג</label>
    <div class="panel">
        <h1>פאנל ג׳</h1>
        <p>קולורס מונפרד אדנדום סילקוף, מרגשי ומרגשח. עמחליף קולהע צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי
            קולורס מונפרד אדנדום סילקוף, מרגשי ומרגשח. עמחליף להאמית קרהשק סכעיט דז מא, מנכם למטכין נשואי מנורך. קולהע
            צופעט למרקוח איבן איף, ברומץ כלרשט מיחוצים. קלאצי סחטיר בלובק. תצטנפל בלינדו למרקל אס לכימפו, דול, צוט
            ומעיוט - לפתיעם ברשג - ולתיעם גדדיש. קוויז דומור ליאמום בלינך רוגצה. לפמעט
        </p>
    </div>
    
</div>

ראשית, שימו לב כי על ה radio button של הלשונית האקטיבית להיות מוגדר כ checked. שנית, וודאו כי לכל ה checkboxes קיים שם זהה, במקרה זה, tabs. קיים כמובן תוכן דמה בשלושת הלשוניות אותו תוכלו לשנות כראות עיניכם.

הוספת עיצוב ל Tabs

כעת ניגע בקונטיינר. האלמנט tabs עושה שימוש ב flexbox בכדי למקם את הילדים (בהם ניגע עוד רגע). ה background המוגדר כאן הוא זה שיופיע עבור הלשוניות שאינן אקטיביות.

.tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
}

אנו לא רוצים שה radio buttons יוצגו ולכן נסתיר אותם. לא נשתמש ב display : none עבור כך מכיוון וזה ישבור את הפונקציונליות. נקבע את התכונה visibility : hidden ומכיוון והם במצב זה עדיין תופסים מקום התוויות לא יהיו במקומם. הפתרון – לתת לאלו גם מיקום אבסולוטי.

.input {
  position: absolute;
  visibility: hidden;
}

אם אינכם יודעים, ההבדל בעין visibility : hidden ל display : none הוא שבמקרה הראשון עדיין יוקצה מקום בעמוד עבור האלמנט ובמקרה של display : none לא…

השלב הבא הוא התווית העליונה של הלשונית. מעבר לעיצוב בסיסי, נשתמש ב adjacent siblings selectors על הקלאס input בכדי לעצב את הקלאס label כאשר הוא בפוקוס ובמצב checked. במובייל, אלו יימתחו לרוחב המסך ובדסקטופ יקחו כמה מקום שהם צריכים.

.label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}

.label:hover {
  background: #d8d8d8;
}

.label:active {
  background: #ccc;
}

.input:focus + .label {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}

.input:checked + .label {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .label {
    width: auto;
  }
}

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

כברירת מחדל, כל הפאנלים חבויים ואנו משתמשים ב adjacent sibling selector גם על הקלאס input וגם על הקלאס label בכדי לבדוק אם הוא מוגדר כ checked. אם כן, אנו מציגים את הפאנל.

.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}

@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}

.input:checked + .label + .panel {
  display: block;
}

דוגמה חיה של הלשוניות שיצרנו

עד כאן. תנו מבט בדמו בכדי להבין טוב יותר ולראות את התוצאה.