انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: شريط التنقل الأفقي في لغة CSS

Horizontal Navbar Dividers States فواصل الروابط وتفاعل الشريط الأفقي

أنشئ أشرطة تنقل أفقية علوية احترافية بلغة CSS باستخدام صف العناصر عبر inline-block والتعويم المحتوى بـ flow-root، مع رسم الفواصل العمودية وتوزيع طرفي الشريط وتثبيته أعلى الشاشة أثناء التمرير.
1 صفوف تعليمية
لغة CSS
5,323 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

في أشرطة التنقل الأفقية المتلاصقة، تساعد الفواصل العمودية الهادئة على توضيح حدود منطقة النقر لكل تبويب:

  • أضف border-left: 1px solid #3d315c على الصنف .nav-item في القوائم العربية RTL، أو border-right: 1px solid #3d315c في الإنجليزية LTR، وألغِ الفاصل الأخير عبر الصنف المساعد .nav-item-last.
  • نسّق حالتي .nav-link:hover و .nav-link:focus بدرجة لونية مميزة، وأبرز القسم المفتوح بالصنف .nav-link-active عبر خلفية لونية واضحة أو خط سفلي بارز border-bottom يدل الزائر فوراً على مكانه.

جميع فقرات هذا الدرس (شريط التنقل الأفقي في لغة CSS)