نواری ناوبری عمودی CSS

التوصيات التعليمية:

لوحة ملاحة عمودية

مثال

width: 200px;
  li a {
  يمكنك أيضًا تعيين عرض <ul>، وإزالة عرض <a>، لأنها عندما تُعرض كعناصر بلوك، فإنها تشغل عرض الكامل المتاح. هذا سيؤدي إلى نتيجة مشابهة للنموذج السابق:
}

جربها بنفسك

لإنشاء لوحة ملاحة عمودية، بالإضافة إلى رمز البرمجة في الفصل السابق، يمكنك أيضًا تعيين سلوك العناصر <a> في القائمة:

  • li a { مثال على التوضيح:
  • يمكنك أيضًا تعيين عرض <ul>، وإزالة عرض <a>، لأنها عندما تُعرض كعناصر بلوك، فإنها تشغل عرض الكامل المتاح. هذا سيؤدي إلى نتيجة مشابهة للنموذج السابق: - يمكن عرض الروابط كعناصر بلوك لجعل منطقة الروابط بأكملها قابلة للنقر (أكثر من النص فقط)، ويمكن تحديد العرض (ويمكن تحديد الهوامش الداخلية والخارجية والارتفاع وما إلى ذلك إذا لزم الأمر).

- بشكل افتراضي، العناصر البلوك تشغل عرض الكامل المتاح. يجب تحديد عرض 60 بكسل.

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  يمكنك أيضًا تعيين عرض <ul>، وإزالة عرض <a>، لأنها عندما تُعرض كعناصر بلوك، فإنها تشغل عرض الكامل المتاح. هذا سيؤدي إلى نتيجة مشابهة للنموذج السابق:
} 
width: 200px;
  li a {
}

جربها بنفسك

width: 60px;

مثال على لوحة ملاحة عمودية

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  إنشاء لوحة ملاحة عمودية أساسية ذات لون خلفي رمادي، وتغيير لون الخلفية للروابط عند تحريك الماوس عليها:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* تغيير لون الروابط عند وضع الماوس عليها */
  li a:hover {
  background-color: #4CAF50;
}

جربها بنفسك

background-color: #555;

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

مثال

إضافة فئة "active" إلى الروابط الحالية، ليعلم المستخدم أنه/هي في أي صفحة:
  .active {
  background-color: #4CAF50;
}

جربها بنفسك

color: white;

جعل الروابط المركزية وإضافة الحاجز text-align:center إلى <li> أو <a>، لجعل الروابط مركزية.

إضافة border إضافة الخاصية إلى <ul>، وإضافة حاجز حول لوحة الملاحة. إذا كنت ترغب أيضًا في إضافة حاجز داخل لوحة الملاحة، فأضف border-bottom، باستثناء العنصر الأخير:

مثال

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

جربها بنفسك

رف رأسي ثابت بالكامل

إنشاء رافعة جانبية مرتبطة بالكامل:

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* الطول الكامل */
  position: fixed; /* يجعله لزجًا حتى في وقت التمرير */
  overflow: auto; /* إذا كان محتوى الرف الجانبي كبيرًا، يتم تمكين علامة التدقيق */
}

جربها بنفسك

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