شريط التنقل الأفقي في لغة CSS

في هذا الدرس 6تصفّح المواضيع

Horizontal Navbar Inline Block صف عناصر التنقل بقيمة inline-block

تتراص عناصر القائمة رأسياً بطبيعتها الافتراضية، غير أن القوائم العلوية للمواقع تعرض الأقسام الرئيسية متجاورة في سطر أفقي واحد. وتتمثل الطريقة الكلاسيكية الأبسط لبناء شريط التنقل الأفقي في إسناد display: inline-block لكل خانة .nav-item مع الإبقاء على display: block والحشوة المريحة على الرابط .nav-link:

تصطف خانات .nav-item جنباً إلى جنب في السطر نفسه دون كسر السطر بعد كل عنصر.
يمكنك توسيط مجموعة الروابط بالكامل في منتصف الشريط بسهولة تامة بمجرد إضافة text-align: center إلى الصنف .nav-list.

تأمل المخطط التوضيحي والمثال القابل للتشغيل أدناه لملاحظة تحول القائمة الدلالية إلى شريط علوي أنيق:

مخطط يوضح صف العناصر عبر inline-block والتعويم المتلاصق مع flow-root وتثبيت الشريط الأفقي أعلى الشاشة

CSS

.nav-item {
  display: inline-block;
}
.nav-link {
  display: block;
  padding: 12px 18px;
  color: #ffffff;
  text-decoration: none;
}

جرّب بنفسك

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

نطبق float: right على الصنف .nav-item في الواجهات العربية RTL، أو float: left في الواجهات الإنجليزية LTR، فتتراص الخانات جنباً إلى جنب بصفر فراغات فاصلة.
نضيف display: flow-root إلى القائمة الأب .nav-list حتى تحتوي أبناءها المعوّمين وتحافظ على كامل ارتفاع خلفيتها بدلاً من انهيار ارتفاعها إلى 0px.

CSS

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flow-root;
  background-color: #1d172b;
}
.nav-item {
  float: left;
}

جرّب بنفسك

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

أضف 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 يدل الزائر فوراً على مكانه.

تحتاج كثير من الواجهات الحقيقية إلى تجميع روابط الأقسام الأساسية في بداية الشريط العلوي مع دفع رابط ثانوي مهم — مثل تسجيل الدخول أو الدعم الفني — إلى أقصى الطرف المقابل من الشريط.

يتحقق هذا التوزيع الطرفي مع التعويم بمرونة عبر صنف مسطح واحد؛ إذ تبقى عناصر .nav-item الأساسية معوّمة نحو البداية، بينما يُمنح العنصر الأخير الصنف .nav-item-end مع تعويم معاكس float: right في الإنجليزية أو float: left في العربية. جرّب الحالات الثلاث في المختبر التفاعلي التالي للمقارنة العملية:

في المقالات والدروس الطويلة، يختفي الشريط الأفقي العادي أعلى الشاشة بمجرد التمرير للأسفل. ويمنحك تطبيق position: sticky مع top: 0 وطبقة z-index: 100 على العنصر .nav-bar حلاً ذكياً ومريحاً:

يبقى الشريط في موضعه الطبيعي أسفل لافتة الترحيب العلوية دون الحاجة إلى حجز حشوة علوية يدوية على body.
وما إن يلامس طرفه العلوي حافة النافذة عند top: 0 أثناء التمرير حتى يلتصق بأعلى الشاشة، بينما تمر فقرات المحتوى من تحته بنظافة بفضل z-index: 100 والخلفية اللونية المصمتة.

CSS

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #1d172b;
}
.nav-item-end {
  float: right;
}

جرّب بنفسك

تمنحك الطريقتان الكلاسيكيتان في هذا الدرس فهماً متيناً لآليات التدفق الأفقي وصيانة المشاريع القائمة بكفاءة. قارن بينهما في الجدول الملخص التالي تمهيداً للفصل القادم الذي يقدم نظام الصناديق المرنة أحادي البعد لتوزيع العناصر ومحاذاتها بمرونة أعلى:

وجه المقارنة	طريقة `display: inline-block`	طريقة `float` مع `display: flow-root`
المسافة بين الخانات	تترك فراغاً صغيراً يقارب 4px بسبب مسافات الكود	ترص التبويبات بتلاصق تام بصفر فراغات بينية
توسيط الروابط أفقياً	سهلة جداً عبر `text-align: center` على القائمة الأب	تحاذي نحو البداية أو النهاية ولا تدعم التوسيط المباشر
توزيع طرفي الشريط	لا تدفع عنصراً منفرداً لأقصى الطرف المقابل	تدعم فصل زر الدخول في الطرف المقابل بتعويم معاكس
ارتفاع القائمة الأب	تحافظ `.nav-list` على ارتفاعها تلقائياً	تتطلب `display: flow-root` لمنع انهيار الارتفاع

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في ملخص الدرس بناء أشرطة التنقل الأفقية بطريقتي display: inline-block والتعويم المحتوى بـ display: flow-root، ورسم الفواصل العمودية، وتوزيع الروابط على طرفي الشريط، وتثبيته أعلى الشاشة أثناء التمرير عبر position: sticky. وفي الخطوة التالية ننتقل إلى فصل جديد يبدأ بدرس الصناديق المرنة - فليكس بوكس في لغة CSS لتعلم أقوى أنظمة التخطيط المرنة الحديثة.

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة

01 Inline-Block Navigation Item عنصر تنقل inline-block: ضبط .nav-item على القيمة display: inline-block لصف خانات القائمة أفقياً في سطر واحد مع دعم التوسيط عبر القائمة الأب.; للمراجعة
02 Floated Horizontal Bar الشريط الأفقي المعوّم: رص عناصر .nav-item أفقياً بتلاصق تام دون فراغات عبر float مع احتواء ارتفاع القائمة الأب باستخدام display: flow-root.; للمراجعة
03 Opposite-Edge Nav Item الرابط الطرفي المقابل: تطبيق اتجاه تعويم معاكس عبر صنف مسطح مثل .nav-item-end لدفع رابط ثانوي كتسجيل الدخول إلى أقصى الطرف المقابل للشريط.; للمراجعة
04 Sticky Top Navigation Bar الشريط العلوي اللاصق: شريط تنقل أفقي يُنسَّق بـ position: sticky و top: 0 و z-index: 100 ليثبت أعلى نافذة المتصفح عند تمرير الصفحة للأسفل.; للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة

01 DOM DOM: Document Object Model; شجرة عناصر المستند التي يحدد ترتيبها في HTML تسلسل انتقال مفتاح Tab بين روابط الشريط الأفقي.; للمراجعة
02 BFC BFC: Block Formatting Context; سياق التنسيق الكتلي الذي ينشئه display: flow-root على القائمة الأب لمنع انهيار خلفية الشريط الأفقي المعوّم.; للمراجعة
03 RTL RTL: Right-to-Left; اتجاه الواجهات العربية حيث تُعوَّم الروابط الأساسية يميناً بينما يُعوَّم الرابط الطرفي الثانوي يساراً.; للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

توسيط شريط أفقي باستخدام inline-block
صفّر القائمة .nav-list مع text-align: center واجعل عناصر .nav-item بقيمة display: inline-block ونسق روابط .nav-link الكتلية.

مطلوبةتم الإنجاز ✓جارٍ الحفظ…
الموضوع أو التطبيق المرتبط
بناء شريط أفقي لاصق موزع الطرفين
اجمع بين تثبيت .nav-bar عبر position: sticky; top: 0; z-index: 100 واحتواء .nav-list بـ display: flow-root مع فصل الرابط الأخير بالصنف .nav-item-end.

مطلوبةتم الإنجاز ✓جارٍ الحفظ…
الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان

تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك

شريط التنقل الأفقي في لغة CSSCSS Horizontal Navigation Bar

Horizontal Navbar Inline Block صف عناصر التنقل بقيمة inline-block

Horizontal Navbar Float Containment إنشاء الشريط الأفقي عبر التعويم

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

Opposite Edge Navbar Alignment توزيع الروابط على طرفي الشريط

Sticky Top Navigation Bar تثبيت الشريط العلوي أثناء التمرير

Horizontal Navbar Methods Comparison مقارنة طرق بناء الشريط الأفقي

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

سجّل الدخول لحفظ تقدمك

المصطلحات4

الاختصارات3

مهامك قبل الاختبار

اختبر فهمك.
ووصلها للإتقان.

لماذا ينهار ارتفاع خلفية .nav-list إلى 0px عند تعويم جميع عناصر .nav-item دون إضافة display: flow-root للأب؟

ما التصريح الذي يُطبَّق على .nav-list لتوسيط صف أفقي من عناصر التنقل المضبوطة على display: inline-block؟

في شريط إنجليزي LTR تعوم فيه عناصر .nav-item يساراً، كيف تدفع العنصر .nav-item-end إلى أقصى الطرف الأيمن؟

أي مجموعة خصائص تُبقي .nav-bar ثابتاً أعلى النافذة فور تجاوز لافتة الصفحة العلوية أثناء التمرير؟

ما السبب التقني لظهور فراغ أفقي صغير يقارب 4px بين عناصر .nav-item المتجاورة عند استخدام display: inline-block؟

لماذا يُفضَّل display: flow-root على الأسلوب القديم overflow: hidden عند احتواء تبويبات الشريط الأفقي المعوّمة؟

يؤدي ضبط overflow: hidden على حاوية أب تحيط بشريط تنقل مطبَّق عليه position: sticky إلى تعطيل التصاقه بنافذة المتصفح أثناء التمرير.

توفّر لغة CSS قيمة قياسية صالحة باسم float: center; لتوسيط عناصر شريط التنقل الأفقي.

شريط التنقل الأفقي في لغة CSSCSS Horizontal Navigation Bar

Horizontal Navbar Inline Block صف عناصر التنقل بقيمة inline-block

Horizontal Navbar Float Containment إنشاء الشريط الأفقي عبر التعويم

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

Opposite Edge Navbar Alignment توزيع الروابط على طرفي الشريط

Sticky Top Navigation Bar تثبيت الشريط العلوي أثناء التمرير

Horizontal Navbar Methods Comparison مقارنة طرق بناء الشريط الأفقي

ملخص الدرس

ماذا تعلّمت في هذا الدرس؟

مشاركة

هل كان هذا الدرس مفيدًا؟

سجّل الدخول لحفظ تقدمك

المصطلحات4

الاختصارات3

مهامك قبل الاختبار

اختبر فهمك.ووصلها للإتقان.

لماذا ينهار ارتفاع خلفية .nav-list إلى 0px عند تعويم جميع عناصر .nav-item دون إضافة display: flow-root للأب؟

ما التصريح الذي يُطبَّق على .nav-list لتوسيط صف أفقي من عناصر التنقل المضبوطة على display: inline-block؟

في شريط إنجليزي LTR تعوم فيه عناصر .nav-item يساراً، كيف تدفع العنصر .nav-item-end إلى أقصى الطرف الأيمن؟

أي مجموعة خصائص تُبقي .nav-bar ثابتاً أعلى النافذة فور تجاوز لافتة الصفحة العلوية أثناء التمرير؟

ما السبب التقني لظهور فراغ أفقي صغير يقارب 4px بين عناصر .nav-item المتجاورة عند استخدام display: inline-block؟

لماذا يُفضَّل display: flow-root على الأسلوب القديم overflow: hidden عند احتواء تبويبات الشريط الأفقي المعوّمة؟

يؤدي ضبط overflow: hidden على حاوية أب تحيط بشريط تنقل مطبَّق عليه position: sticky إلى تعطيل التصاقه بنافذة المتصفح أثناء التمرير.

توفّر لغة CSS قيمة قياسية صالحة باسم float: center; لتوسيط عناصر شريط التنقل الأفقي.

اختبر فهمك.
ووصلها للإتقان.