الشريط التوجيهي الأفقي في CSS

نافذة توجيه مستوى أساسي

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

عناصر القائمة المدمجة

يمكن بناء نافذة توجيه مستوى أساسي واحدة باستخدام <li> المحدد كinline بالإضافة إلى الكود القياسي في الفصل السابق:

مثال

li {
  display: inline;
}

جرب بنفسك

توضيح المثال:

display: inline; - بشكل افتراضي، العناصر <li> هي عناصر كبيرة. هنا، نزيل النسخ الأفقية قبل كل عنصر القائمة والنسخ الأفقية بعد كل عنصر القائمة، حتى تظهر في سطر واحد.

عناصر القائمة المتحركة

يمكن إنشاء نافذة توجيه مستوى أساسي آخر عن طريق تحريك عناصر <li> والتحديد للتوجيه وضبط التخطيط للرابط:

مثال

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

جرب بنفسك

توضيح المثال:

  • float: left; - استخدم float لجعل العناصر الكبيرة تتحرك بجوار بعضها البعض
  • display: block; - يمكن عرض الرابط كعنصر كبير يجعل منطقة الرابط بأكمله قابلة للنقر (ليس فقط النص)، ويسمح لنا بتحديد الحشو (إذا لزم الأمر، يمكن تحديد الارتفاع، العرض، الهوامش، إلخ)
  • padding: 8px; - جعل العناصر الكبيرة أكثر جاذبية
  • background-color: #dddddd; - أضف لون خلفي رمادي لكل عنصر

إشارة:إذا كنت ترغب في لون خلفي كامل العرض، فأضف background-color إلى <ul> وليس لكل عنصر <a>:

مثال

ul {
  background-color: #dddddd;
}

جرب بنفسك

مثال على نافذة توجيه مستوى أساسي

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

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* عند مرور الفأرة على الرابط، قم بتغيير لون الرابط إلى #111 (أسود) */
li a:hover {
  background-color: #111;
}

جرب بنفسك

الرابط النشط/الرابط الحالي

أضف صفة "active" إلى الرابط الحالي، حتى يعرف المستخدم أنه في أي صفحة:

مثال

.active {
  background-color: #4CAF50;
}

جرب بنفسك

تنسيق يميني للروابط

من خلال تحريك عناصر القائمة إلى اليمين لتحقيق تنسيق يميني للروابط (float:right;):

مثال

<ul>
  <li><a href="#home">المنزل</a></li>
  <li><a href="#news">أخبار</a></li>
  <li><a href="#contact">اتصل بنا</a></li>
  <li style="float:right"><a class="active" href="#about">عنوان</a></li>
</ul>

جرب بنفسك

فاصلة الحواف

لل border-right الخصائص إلى <li> لإنشاء فاصلة بين الروابط:

مثال

/* أضف حواف رمادية إلى جميع عناصر القائمة، باستثناء الأخيرة (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

جرب بنفسك

التصفح الثابت

لحفظ قائمة التصفح في أعلى أو أسفل الصفحة، حتى إذا كان المستخدم يتأرجح الصفحة:

ثابت في الأعلى

ul {
  position: fixed;
  العمود: 0;
  width: 100%;
}

جرب بنفسك

ثابت في الأسفل

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

جرب بنفسك

ملاحظة:قد لا يعمل التثبيت الثابت بشكل صحيح على الأجهزة المحمولة.

شريط التصفح الأفقي الرمادي

مثال لشريط التصفح الأفقي الرمادي مع حواف رمادية دقيقة

مثال

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

جرب بنفسك

قائمة استكشافية لزجة

إضافة الوضع: sticky;لإنشاء قائمة استكشافية لزجة.

العناصر اللزجة ستتغير بين النسبية والثابتة بناءً على موقع التمرير. إنها معلقة نسبيًا حتى تصل إلى موقع الإزاحة المحدد في الصوره - ثم يتم "اللصق"ها في الموقع المناسب (مثل position:fixed).

مثال

ul {
  الوضع: -webkit-sticky; /* Safari */
  الوضع: sticky;
  العمود: 0;
}

جرب بنفسك

ملاحظة:Internet Explorer وEdge 15 وأقدم إصداراتها لا يدعمون التثبيت المطلق. يحتاج Safari إلى بدلاً من -webkit- (انظر المثال أعلاه). يجب عليك أيضًا تحديد العمودواليمينوالأسفل أو اليسار أو على الأقل واحد لجعل التثبيت المطلق يعمل.

المزيد من الأمثلة

لوحة توجيه أعلى تفاعلية
كيفية إنشاء لوحة توجيه أعلى تفاعلية باستخدام استعلام وسائل الإعلام CSS.
لوحة توجيه تفاعلية
كيفية إنشاء لوحة توجيه تفاعلية باستخدام استعلام وسائل الإعلام CSS.
لوحة توجيه منسدلة
كيفية إضافة قائمة منسدلة في لوحة التوجيه.