كيفية إنشاء: قائمة ثابتة

كيفية إنشاء قائمة ثابتة في الأعلى

الخطوة الأولى - إضافة HTML:

<div class="navbar">
  <a href="#home">المنزل</a>
  <a href="#news">أخبار</a>
  <a href="#contact">اتصل بنا</a>
</div>
<div class="main">
  <p>نص بعض النصوص نص بعض النصوص نص بعض النصوص نص بعض النصوص..</p>
</div>

الخطوة الثانية - إضافة CSS:

لإنشاء قائمة ثابتة في الأعلى، استخدم position:fixed و top:0الرجاء الانتباه، ستعتمد قائمة القائمة الثابتة على محتواك الآخر. لحل هذه المشكلة، قم بإضافة مسافة أعلى (margin-top) تساوي أو أكبر من طول القائمة.

/* قائمة التوجيه */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* إعداد قائمة التوجيه كوضع ثابت */
  top: 0; /* وضع قائمة التوجيه في أعلى الصفحة */
  width: 100%; /* عرض كامل */
}
/* الروابط داخل قائمة التوجيه */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* تغيير خلفية عند التمرير بالفأرة */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* محتوى رئيسي */
.main {
  margin-top: 30px; /* إضافة مسافة أعلى خارجية لتجنب تكرار المحتوى */
}

جرب بنفسك

كيفية إنشاء قائمة قاعدة ثابتة

لإنشاء قائمة قاعدة ثابتة، استخدم position:fixed و bottom:0:

/* قائمة التوجيه */
.navbar {
  position: fixed; /* إعداد قائمة التوجيه كوضع ثابت */
  bottom: 0; /* وضع قائمة التوجيه في أسفل الصفحة */
  width: 100%; /* عرض كامل */
}
/* محتوى رئيسي */
.main {
  margin-bottom: 30px; /* إضافة مسافة أسفل خارجية لتجنب تكرار المحتوى */
}

جرب بنفسك

الصفحات ذات الصلة

دليل:مربعات التوجيه CSS