الفصل 13: التنقل (Navigation)

تصميم قوائم أفقية وعمودية (بالعامية المصرية)

---

🎯 يعني إيه Navigation؟

القائمة أو الـ Navbar هي اللي الناس بتستخدمها عشان توصل لأقسام الموقع:
زي (الرئيسية – من نحن – الخدمات – تواصل معنا…)

ودي لازم تبقى:

• واضحة
• سهلة الاستخدام
• شكلها محترم ومتجاوبة مع الموبايل

---

1️⃣ قائمة أفقية (Horizontal Menu)

ودي اللي بتظهر فوق الصفحة من الشمال لليمين أو العكس حسب اللغة.

---

📌 مثال عملي بسيط:

htmlCopy code<nav>
  <ul class="nav">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">الخدمات</a></li>
    <li><a href="#">من نحن</a></li>
    <li><a href="#">اتصل بنا</a></li>
  </ul>
</nav>

cssCopy code.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
  justify-content: center;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: white;
  text-decoration: none;
  padding: 15px;
  display: block;
}

.nav a:hover {
  background-color: #555;
}

🟢 النتيجة:
قائمة فوق الشاشة، العناصر جنب بعض، وكل لينك بيتظلل لما تقف عليه.

---

2️⃣ قائمة عمودية (Vertical Menu)

ودي بتكون غالبًا في الشريط الجانبي أو لما الموقع يبقى على موبايل.

---

📌 مثال عملي لقائمة عمودية:

htmlCopy code<ul class="sidebar">
  <li><a href="#">الرئيسية</a></li>
  <li><a href="#">المنتجات</a></li>
  <li><a href="#">عروضنا</a></li>
  <li><a href="#">تواصل</a></li>
</ul>

cssCopy code.sidebar {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #222;
  width: 200px;
}

.sidebar li a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #444;
}

.sidebar li a:hover {
  background-color: #444;
}

🔹 النتيجة: قائمة رأسية ناحية اليمين أو الشمال، كل عنصر واخد سطر لوحده.

---

📱 طب القوائم دي تتظبط إزاي على الموبايل؟

– تستخدم Media Queries علشان القائمة الأفقية تتحوّل عمودية
– أو تضيف أيقونة Menu (hamburger menu) تفتح القائمة لما المستخدم يضغط عليها

---

✅ نصايح سريعة:

• خليك دايمًا منظم، واستعمل <nav> لتحديد منطقة التنقل.
• لو موقعك بالعربي، استخدم direction: rtl أو خليه يقرأ من اليمين للشمال.
• استعمل Flexbox علشان تسهّل تنظيم العناصر.
• ماتنساش تعمل :hover عشان المستخدم يعرف إنه يقدر يضغط.

---

💡 عايز تتطور؟ جرب كمان:

• تعمل قائمة Dropdown
• تضيف أيقونات جنب اللينكات
• تعمل قائمة تنزلق من الجنب (slide menu)