CSS - Navigation Bar شريط التنقل

- أبريل 13, 2025

CSS - شريط التنقل (Navigation Bar)

🔸 شريط التنقل (Navbar) هو قائمة من الروابط تساعد الزائر في التنقل بين صفحات أو أقسام الموقع. يمكن أن يكون أفقيًا أو عموديًا حسب التصميم المطلوب.

📌 التنسيق العام لقائمة تنقل

عادة نستخدم قائمة غير مرتبة <ul> بداخلها عناصر <li> تحتوي على روابط <a>. ثم ننسقها باستخدام CSS لإظهارها كشريط تنقل.


<ul>
  <li><a href="#home">الرئيسية</a></li>
  <li><a href="#services">الخدمات</a></li>
  <li><a href="#about">من نحن</a></li>
  <li><a href="#contact">اتصل بنا</a></li>
</ul>

---

🧭 شريط تنقل عمودي (Vertical Navbar)

يتم عرض العناصر عموديًا، وهو مفيد عادة في الشريط الجانبي (sidebar).


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

📌 العناصر تظهر كسطر كامل، وتتم محاذاتها بشكل عمودي.

---

🧭 شريط تنقل أفقي (Horizontal Navbar)

يُستخدم في أعلى الصفحة، ويعرض الروابط بجانب بعض أفقيًا.


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;
}

li a:hover {
  background-color: #111;
}

📌 يتم استخدام float: left; لجعل العناصر بجانب بعضها.

---

🧪 مثال عملي كامل (أفقي)


<!DOCTYPE html>
<html>
<head>
  <style>
    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;
    }

    li a:hover {
      background-color: #111;
    }
  </style>
</head>
<body>

<ul>
  <li><a href="#home">الرئيسية</a></li>
  <li><a href="#news">الأخبار</a></li>
  <li><a href="#contact">اتصل بنا</a></li>
  <li><a href="#about">عن الموقع</a></li>
</ul>

</body>
</html>

---

📌 ملاحظات هامة

يفضل استخدام Flexbox بدلًا من float في التصميمات الحديثة.
يمكنك جعل الشريط متجاوبًا باستخدام media queries.
يفضل دائمًا جعل شريط التنقل متاحًا في كل صفحات الموقع.
يمكنك إضافة قائمة منسدلة (dropdown) باستخدام CSS فقط أو مع JavaScript.

بحث هذه المدونة الإلكترونية

Code3arabi | محمود السكري