علامات تبويب باستخدام CSS3

تعتبر علامات التبويب (Tabs) من العناصر الأساسية في واجهات الاستخدام. و قد كان إنشاؤها في صفحات الويب، حتى وقت قريب، يعتمد على وجود JavaScript. لكن أنصار قابلية الوصول (Accessibility) يرفضون الاعتماد على JavaScript مهما كان بسيطاً (ولديهم أسباب مقنعة جداً لذلك)، وقد تمّ إيجاد حلول لهذا، لكن هذه الحلول كانت تتضمن دوماً التغاضي عن طريقة العمل المتعارف عليها لعلامات التبويب (كأن يتم عرض محتوى جميع التبويبات إذا لم تتوفر JavaScript).

لكن الآن أصبح بالإمكان إنشاء علامات تبويب دون أي اعتماد على JavaScript بفضل CSS3.

علامات تبويب باستخدام CSS3

أقلع محررك النصي ولنبدأ…

شيفرة HTML:

نحتاج أولاً للبنية التالية ضمن ملف HTML.

<section>
    <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
    <label for="tab-1" class="tab-label-1">Tab 1</label>
    <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
    <label for="tab-2" class="tab-label-2">Tab 2</label>
    <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
    <label for="tab-3" class="tab-label-3">Tab 3</label>

    <div class="content">
        <div class="content-1">
            <p>Content 1</p>
        </div>
        <div class="content-2">
            <p>Content 2</p>
        </div>
        <div class="content-3">
            <p>Content 3</p>
        </div>
    </div>
</section>

كما ترى، لدينا العنصر الحاوي لعلامات التبويب (Section)، ويحوي زر اختيار (Radio) وعنصر (Label) مرتبطاً معه لكل علامة تبويب. كما يحوي منقطة المحتوى التي تحوي بدورها محتوى كل علامة تبويب.

لاحظ أن جميع عناصر (Radio) تملك اسماً واحداً، وبالتالي يمكن تحديد واحد فقط وهو ما سيكون علامة التبويب الفعالة بالنسبة لنا، كما يجب تحديد العلامة الأولى بشكل افتراضي ليظهر محتواها عند تحميل الصفحة.

تنسيقات CSS:

علينا أولاً أن نحدد التنسيق الأساسي للعنصر الحاوي لعلامات التبويب. يمكنكم تغييره لاحقاً حسب الحاجة، لكننا بحاجة لنقطة انطلاق.

.tabs {
    margin: 0 auto;
    max-width: 60em;
    width: 80%;
}

بالنسبة لعلامات التبويب، نقوم أولاً بإخفاء مربعات الاختيار (Radio).

.tabs > input[type=radio] {
    display: none;
}

ثم نقوم بتنسيق عناصر (Label) لتظهر بالشكل المناسب، لا أعتقد أن هذا سيصعب عليكم.

.tabs > label {
    background: #27ae62;
    border-right: 1px solid #378358;
    cursor: pointer;
    display: block;
    float: right;
    font: bold 1.5em Arial, Helvetica, sans-serif;
    padding: .5em;
}

.tabs > label:hover {
    background: #0d7138;
}

هنا يبدأ المرح. لتنسيق التبويب الفعال سنستخدم محدد (:checked) لعناصر Radio ومحدد العنصر التالي (Adjacent Sibling Selector) لتنسيق عنصر Label الموافق لعلامة التبويب الفعالة حالياً.

.tabs > input[type=radio]:checked + label {
    background: #fff;
    color: #27ae62;
}

نعطي تنسيقاً مناسباً لمنطقة المحتوى ونخفي كتلة المحتوى الخاصة بكل علامة تبويب.

.tabs .content {
    background: #fff;
    clear: both;
    color: #378358;
    min-height: 10em;
    padding: 1em 2em;
}
.tabs .content > div {
    display: none;
}

وهذه قد تكون جديدة عليكم أيضاً. لإظهار كتلة المحتوى الخاصة بعلامة التبويب الفعالة نستخدم محدد العنصر المجاور (Sibling Selector). نحتاج لتكرار هذه السطر لكل علامة تبويب جديدة نضيفها، لكن ذلك ليس صعباً جداً، صحيح؟

.tabs .tab-selector-1:checked ~ .content .content-1 { display: block; }
.tabs .tab-selector-2:checked ~ .content .content-2 { display: block; }
.tabs .tab-selector-3:checked ~ .content .content-3 { display: block; }
...

قد يسأل سائل: لماذا لم نغلف عناصر Radio و Label ضمن عنصر يحتويها؟ والجواب أنها يجب أن تكون على نفس مستوى كتلة المحتوى ليعمل محدد العنصر المجاور، وحالياً لا يمكننا تحديد العنصر الأب باستخدام CSS.

أمثلة:

يمكنكم الاطلاع على الأمثلة الموجودة على هذا الرابط، كما يمكنكم تحميل ملفات الأمثلة من هنا.

المثال الأول يطبق ما ذكرناه هنا ببساطة، ورغبت أن يملك المثال الثاني تعقيداً أكثر في التنسيق، لكن مبدأ العمل هو نفسه في الحالتين.

تجدر الإشارة إلى أني لم آخذ احتياطات لدعم المستعرضات القديمة، ولم أضف البوادئ الخاصة بالمستعرضات (Browser Specific Prefixes)، لذا حاولوا استعراض الأمثلة على مستعرض حديث نسبياً.

المصدر:

هذا الدرس هو تبسيط عن Animated Content Tabs with CSS3 من موقع Codrops الرائع.

هذا الموقع كثيراً ما يقدم أمثلة وأفكاراً ذكية في تطوير واجهات الويب، أنصح الجميع بمتابعته.

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *