كيفية بناء عنصر تنقل بسيط في شريط علامات التبويب

في موضوع لمدة أسبوع # 3 من بلدي أسبوعي الترميز التحدي هو التنقل ! لذلك دعونا نتعلم المزيد عنها.

التنقل

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

في هذه المقالة ، قررت إنشاء التنقل في شريط علامات التبويب ، ولكن يمكنك إنشاء أي نوع من التنقل تريده.

لقد ألهمني هذا التصميم الذي صممه Aurelien Salomon. هذا ما ستبدو عليه النتيجة النهائية لما سنبنيه:

HTML

ستكون بنية HTML بسيطة. سيكون لدينا .tab-nav-containerأربع وأربع .tabثوان بداخله:

House
Likes
Search
Profile

كما ترون، كل .tabلديه رمز (من FontAwesome)، نص المقابلة، وبعض الطبقات الإضافية التي سيتم استخدامها لإعطاء كل محددة التبويب background-colorو colorالممتلكات. أيضًا .activeالفصل الذي سيتم استخدامه لتصميم علامة التبويب النشطة. بسيط جدا ، أليس كذلك؟ ؟

CSS

أولاً ، دعنا نصمم .tab-nav-container:

ملحوظة : لدينا fixedعرض على الحاوية لأننا لا نريد تغيير حجمها عندما نقوم بتغيير النشط .tabلأن كل علامة تبويب قد تحتوي على نص أطول أو أقصر في الحجم (على سبيل المثال الصفحة الرئيسية (4 أحرف) مقابل الملف الشخصي (6 حروف)).

نستخدمها flexboxلتوزيع .tabs بالتساوي داخل الحاوية. بخلاف ذلك ، أعتقد أن CSS تشرح نفسها بنفسها.

التالي ... .tabتصميم:

.tab { background-color: #ffffff; border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 20px; margin: 0 10px; transition: background 0.4s linear; } .tab i { font-size: 1.2em; } .tab p { font-weight: bold; overflow: hidden; max-width: 0; } .tab.active p { margin-left: 10px; max-width: 200px; transition: max-width 0.4s linear; } .tab.active.purple { background-color: rgba(91, 55, 183, 0.2); color: rgba(91, 55, 183, 1); } .tab.active.pink { background-color: rgba(201, 55, 157, 0.2); color: rgba(201, 55, 157, 1); } .tab.active.yellow { background-color: rgba(230, 169, 25, 0.2); color: rgba(230, 169, 25, 1); } .tab.active.teal { background-color: rgba(28, 150, 162, 0.2); color: rgba(28, 150, 162, 1); }

بعض الأشياء التي يجب ملاحظتها هنا:

  1. من أجل الحصول على انتقال سلس عندما نغير .activeعلامة التبويب ، فإننا نضع transition: backgroundخاصية .tabللفصل.
  2. افتراضيا pالعلامة داخل .tabلديها max-widthمن 0وفي overflowمجموعة الخصائص ل hidden. هذا لأننا نريد فقط إظهار النص عندما .tabيكون نشطًا فقط.
  3. نحن نستخدم طبقات اللون حسب الطلب ( .purple، .pink، الخ) لدينا ألوان مختلفة في علامات التبويب.

لنتأكد من أنه يبدو جيدًا على الهاتف المحمول أيضًا:

@media (max-width: 450px) { .tab-nav-container { padding: 20px; width: 350px; } .tab { padding: 0 10px; margin: 0; } .tab i { font-size: 1em; } }

كما ترى ، نحن بصدد تقليص الوقت الذي .tab-nav-containerيكون فيه الحد الأقصى لعرض إطار العرض 450pxونقوم أيضًا بتقليل المساحة المتروكة لجعلها تبدو أصغر.

جافا سكريبت

في النهاية ، في JS ، يتعين علينا التأكد من أنه عندما ينقر المستخدم .tabعلى .activeفئة أخرى ، تتم إضافة فئة إليه وإزالتها من العنصر النشط السابق .tab:

// Get all the tabs const tabs = document.querySelectorAll('.tab'); tabs.forEach(clickedTab => { // Add onClick event listener on each tab clickedTab.addEventListener('click', () => { // Remove the active class from all the tabs (this acts as a "hard" reset) tabs.forEach(tab => { tab.classList.remove('active'); }); // Add the active class on the clicked tab clickedTab.classList.add('active'); }); });

استنتاج

يتم استخدام هذا النوع من التنقل في شريط علامات التبويب في الغالب على الأجهزة المحمولة ، لذلك إذا كنت تريد إعادة استخدامه لتطبيق جوّال ، فتأكد من وضع الحاوية في أسفل الشاشة (باستخدام position: fixed) وإعادة حساب العرض لملء الكل عرض الشاشة.

في مثال Codepen ، نقوم أيضًا بتغيير لون خلفية الجسم عند النقر فوق علامة تبويب أخرى. هذا للأغراض المرئية فقط ولا يتعلق تمامًا بموضوع الترميز لهذا الأسبوع. ولكن إذا كنت تريد أن ترى كيف فعلت ذلك ، فتحقق من كود JS في القلم (فقط سطرين إضافيين من التعليمات البرمجية).

المزيد من الأمثلة لتحدي التشفير هذا

في مقال سابق ، أوضحت كيفية إنشاء قائمة تنقل سريعة الاستجابة. يمكنك التحقق من ذلك أيضًا إذا كنت ترغب في بناء شيء من هذا القبيل.

أيضًا إذا لم تكن قد فعلت ذلك ، فتأكد من قراءة "قواعد" تحدي البرمجة الأسبوعي إذا كنت ترغب في المشاركة في التحدي! ولماذا لا؟ إنها طريقة رائعة لتحسين مهاراتك في البرمجة! ؟

ترميز سعيد! ؟

نُشر في الأصل على www.florin-pop.com.