أشرطة التنقل بـ CSS
درس التخطيط رسم مناطق الصفحة. شريط التنقل هو شريط الروابط الذي يساعد الناس على التنقل بين تلك المناطق والصفحات. ابدأ بقائمة دلالية من الروابط، رتّبها في صف هادئ، ثم أضف إشارات hover — واحفظ القوائم المنسدلة المتداخلة للدرس التالي.
مجموعة أدوات التنقل
📊 التنقل بنظرة سريعة
| القطعة | المهمة اليومية |
|---|---|
nav |
معلم لروابط الموقع الرئيسية/الثانوية |
ul / li / a |
قائمة منظمة بالوجهات |
| إعادة ضبط القائمة | إزالة النقاط والمسافة البادئة الافتراضية لتخطيط الشريط |
| صف أفقي | Flex أو inline-block لتجلس الروابط جنبًا إلى جنب |
| Hover / الحالي | تغذية راجعة للمؤشر و«أنت هنا» |
| تنقل عمودي | نفس القائمة مكدّسة — مفيدة في الشريط الجانبي |
التنقل ما زال روابط. أبقِ حدود التركيز ظاهرة، امنح padding مريحًا، ولا تخفِ المعنى داخل أكوام div بلا اسم.
قائمة دلالية داخل nav
غلّف القائمة في nav واحفظ الوجهات كروابط حقيقية داخل قائمة. قرّاء الشاشة ونسخة المستقبل منك سيشكران البنية.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
شريط أفقي بـ Flex
صف flex بسيط يحوّل القائمة إلى شريط. الفجوة والـ padding أفضل من أهداف لمس ضيقة. (حرفة Flexbox الأعمق تأتي لاحقًا — هذا يكفي لشريط تنقل نظيف.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
إشارات hover والصفحة الحالية
قدّم تغذية راجعة عند hover وعلّم الصفحة الحالية بفئة. لا تزِل حدود :focus أبدًا بحجة «التنظيف».
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
تنقل جانبي عمودي
نفس القائمة يمكن أن تتكدّس في شريط جانبي. أبقِ المسافات سخية حتى يبقى كل رابط سهل الضغط.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
عادة تنقل هادئة
استخدم nav + قائمة + padding مقروء. فضّل صفوف flex للأشرطة الأفقية. اترك القوائم الضخمة والمنسدلة للدرس التالي. لا تخلط شريط الروابط بغلاف تخطيط الصفحة الكامل.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
جرّب بنفسك
- ابنِ
nav > ul.nav > li > aوأعِد ضبط أنماط القائمة. - رتّب الروابط في صف flex أفقي مع padding وgap.
- أضف نمط
:hoverو.is-current. - انسخ القائمة كتنويع sidenav عمودي.
- اكتب جملة واحدة: ما الذي ينتمي لدرس القوائم المنسدلة بدلًا من هنا؟
أخطاء شائعة
- padding ضئيل يفشل أهداف اللمس والفأرة
- إزالة حدود التركيز نهائيًا
- حساء div بدل
navوالقوائم - بناء قوائم منسدلة متداخلة ضخمة في هذا الدرس
- معاملة شريط التنقل كتخطيط الموقع بأكمله
ملخص
- أشرطة التنقل قوائم روابط منظمة داخل
nav - أعِد ضبط النقاط ثم رتّب بـ flex (أو inline-block)
- أنماط hover والحالي توجّه دون قتل التركيز
- التنقل العمودي نفس القائمة مكدّسة
- القوائم المنسدلة تنتظر الدرس التالي
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى