درس عمل تبويبات(Taps) بإستخدام CSS

11:39:00 م
سنتعلم معاً في هذا الدرس كيفية صنع نموذج تبويبات بإستخدام CSS ودون استخدام أو كتابة أي كود جافاسكريبت


السلام عليكم ورحمة الله وبركاته

 سنتعلم في هذا الدرس كيفية عمل تبويبات بالـCSS دون استخدام أي جافاسكريبت

المهارات التي يتوجب عليك معرفتها لتطبيق الدرس :
-المعرفة الجيدة من لغتي HTML & CSS

أهم خصائص CSS التي سنتستخدمها في هذا الدرس :

في حال لم تكن على معرفة جيدة بأحد هذه الخصائص قم بالضغط عليها وسيقوم بتحويلك إلى رابط فيه كافة التفاصيل على موقع W3Shool

 النتيجة النهائية للدرس :

See the Pen gwRmQY by Mohammed Jaffar (@MJK) on CodePen.

 في البداية دعنا نقوم ببناء هيكلة ملف الـ html الخاصة بنا كما في التالي : 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Tabs</title>
  </head>
  <body>
      <div class="tabs">
        <div class="tab">
          <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
          <label for="tab-1" class="tab-label">التبويبة الأولى</label>
          <div class="tab-content">
            هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز
            على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. ولذلك يتم استخدام طريقة
            لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن استخدام "هنا يوجد محتوى نصي،
            هنا يوجد محتوى نصي" فتجعلها تبدو (أي الأحرف) وكأنها نص مقروء. العديد من برامح النشر المكتبي
            وبرامح تحرير صفحات الويب تستخدم لوريم إيبسوم بشكل إفتراضي كنموذج عن النص، وإذا قمت بإدخال
            "lorem ipsum" في أي محرك بحث ستظهر العديد من المواقع الحديثة العهد في نتائج البحث. على مدى
            السنين ظهرت نسخ جديدة ومختلفة من نص لوريم إيبسوم، أحياناً عن طريق الصدفة، وأحياناً عن عمد
            كإدخال بعض العبارات الفكاهية إليها.

          </div>
        </div>

        <div class="tab">
          <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
          <label for="tab-2" class="tab-label">التبويبة الثانية</label>
          <div class="tab-content">
            لوريم إيبسوم(Lorem Ipsum) هو ببساطة نص شكلي (بمعنى أن الغاية هي الشكل وليس
            المحتوى) ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ
            القرن الخامس عشر عندما قامت مطبعة مجهولة برص مجموعة من الأحرف بشكل عشوائي أخذتها من نص،
            لتكوّن كتيّب بمثابة دليل أو مرجع شكلي لهذه الأحرف. خمسة قرون من الزمن لم تقضي على هذا النص، بل
            انه حتى صار مستخدماً وبشكله الأصلي في الطباعة والتنضيد الإلكتروني. انتشر بشكل كبير في ستينيّات هذا
            القرن مع إصدار رقائق "ليتراسيت" (Letraset) البلاستيكية تحوي مقاطع من هذا النص، وعاد لينتشر مرة
            أخرى مؤخراَ مع ظهور برامج النشر الإلكتروني مثل "ألدوس بايج مايكر" (Aldus PageMaker) والتي حوت
            أيضاً على نسخ من نص لوريم إيبسوم.

          </div>
        </div>

        <div class="tab">
          <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
          <label for="tab-3" class="tab-label">التبويبة الثالثة</label>
          <div class="tab-content">
            هنالك العديد من الأنواع المتوفرة لنصوص لوريم إيبسوم، ولكن الغالبية تم تعديلها بشكل ما عبر
            إدخال بعض النوادر أو الكلمات العشوائية إلى النص. إن كنت تريد أن تستخدم نص لوريم إيبسوم ما، عليك
            أن تتحقق أولاً أن ليس هناك أي كلمات أو عبارات محرجة أو غير لائقة مخبأة في هذا النص. بينما تعمل جميع
            مولّدات نصوص لوريم إيبسوم على الإنترنت على إعادة تكرار مقاطع من نص لوريم إيبسوم نفسه عدة
            مرات بما تتطلبه الحاجة، يقوم مولّدنا هذا باستخدام كلمات من قاموس يحوي على أكثر من 200 كلمة لا
            تينية، مضاف إليها مجموعة من الجمل النموذجية، لتكوين نص لوريم إيبسوم ذو شكل منطقي قريب إلى
            النص الحقيقي. وبالتالي يكون النص الناتح خالي من التكرار، أو أي كلمات أو عبارات غير لائقة أو ما شابه.
            وهذا ما يجعله أول مولّد نص لوريم إيبسوم حقيقي على الإنترنت.
          </div>
        </div>
      </div>

  </body>
</html>
النتيجة : 


 في كود الـHTML الخاص بنا قمنا في البداية بإنشاء حاوية (div) وقمنا بإعطائها كلاس بإسم (tabs) بمعنى تبويبات وهذه الحاوية ستقوم بإحتاوء جميع التبويبات الآخرى ثم بداخل هذه الحاوية قمنا بإنشاء ثلاثة حاويات اخرى كل منها يحمل كلاس بإسم (tab) في كل تبويبة يوجد حقل من نوع (radio) و label وحاوية اخرى تحمل اسم كلاس (tab-content) حيث هذه الحاوية سنضع بداخلها النص الذي نريده الآن دعنا نبدأ العمل على الـ css قي البداية دعنا نغيير اتجاه الكتابة لليمن لأننا سنستخدم اللغة العربية وايضاً سنقوم بتغيير الخلفية وايضاً سنقوم بتغيير المسافة بين النصوص قليلاً كما في التالي : 
html{
    direction: rtl
}
body {
    background: #ececec;
    line-height: 1.5em;
}

ثانياً سنقوم بالتعديل قليلاً على الحاوية التي تحتوي على التبويبات والتي اضفنا لها كلاس بإسم (tabs) كما في التالي : 

.tabs {
    background: #1c91af;
    height: 200px;
    position: relative;
/*لإخفاء أي جزء سيكون خدود الحاوية*/
    overflow: hidden; 
}

هنا كما تلاحظ قمنا بتغيير الخلفية وجعنلنا الطول 200 بكسل وغيرنا التموضوع إلى (relative) ثم قمنا بإخفاء أي شيء سيخرج خارج حدود الحاوية الآن سنقوم ايضاً بإخفاء (radio) لأننا لا نحتاجها ، ولكنها ستظهل تعمل بشكل سليم عند الضغط على الـ(label) الخاص بها بالرغم من إخفائها فلا تقلق 

.tab-switch {
    display: none;
}

الآن دعنا نقوم بتنسيق النص ولكننا سنقوم ايضاً بإخفائه لأننا نريده أن يظهر فقط عن الضغط على عنوان التبيوية 
.tab-content {
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 1;
    background: white;
    color:#545454;
    padding: 10px;
    height: 200px;
    text-align: justify;
    transition: all 0.35s;
    overflow:hidden;
}

لاحظ هنا أننا قمنا بتغيير التموضع إلى (absolute) لأننا نريد أن تكون جميع التبويبات في مكان واحد الآن دعنا نقوم ايضاً بتنسيق بسيط لعناوين التبويبات (label) 
.tab-label {
    float: right;
    padding: 10px 25px;
    height: 50px;
    background: #1c91af;
    color: #fff;
    border-left: 2px solid #187790;
    position: relative;
    cursor: pointer;
    transition: all 0.35s;
}
.tab-label:hover {
    top: -3px;
    transition: top 0.25s;
}

النتيجة كما ترى :
 الآن سنقوم بتغيير لون عنوان التبوية عند الضغط عليها لتصبح وكأنها نشطة لنعام في أي تبويبة نحن الآن ولفعل ذلك سنحتاج لإستخدام (Checked Selector) كما يلي : 
.tab-switch:checked + .tab-label {
    background: #fff;
    color: #545454;
    top: -5;
    transition: all 0.35s;
}

لاحظ بأن التبويبة الأولى تكون مفعلة تلقائياً وذلك بسبب أننا قمنا بإضافة خاصية (checked) لحقل (radio) الخاص بالتبويبة الآلى في كود الـ HTML الآن نريد أن نقوم بإظهار نص كل تبويبة عند الضغط على عنوان كل تبويبة سنقوم بإستخدام نفس الطريقة السابقة بإستخدام (:checked) سنقوم بتغير قيمة (visibility) 
.tab-switch:checked + label + .tab-content {
    visibility: visible;
    transition: all 0.35s;
}

الآن لنذهب ونلقي نظرة إلى النتيجة :

See the Pen gwRmQY by Mohammed Jaffar (@MJK) on CodePen.
في الختام إذا استفدت من هذا الدرس لا تنسى دعمنا ونشره على المواقع الإجتماعية
 ودمتم في حفظ الله ورعايته

هناك تعليق واحد

المقالات الاكثر مشاهدة

قالب هاش تك 2016 © - منتج إبداعي طور بواسطة حيّاك