شرح كود Navbar متجاوب مع جميع الشاشات (Desktop & Mobile)

الـ Navbar (شريط التنقل) هو من أهم عناصر أي موقع، لأنه:

• يساعد الزائر يتنقل بسهولة
• يحسن تجربة المستخدم
• عنصر أساسي في التصميم الاحترافي
• له تأثير غير مباشر على SEO

في هذا المقال سنتعلم شرح كود Navbar متجاوب مع جميع الشاشات باستخدام HTML و CSS فقط، مع مثال عملي يعمل على:

• الكمبيوتر
• التابلت

ما هو الـ Navbar؟

الـ Navbar هو شريط يحتوي على:

• روابط الصفحات
• اللوجو
• أحيانًا زر القائمة (Menu)

ويظهر عادة في أعلى الموقع.

لماذا يجب أن يكون الـ Navbar متجاوب؟

✔️ لأن أغلب الزوار من الموبايل

✔️ لأن جوجل يفضل المواقع المتجاوبة

✔️ لأن القالب غير المتجاوب = تجربة سيئة

هيكلة كود الـ Navbar

سنقسم العمل إلى:

1. HTML (الهيكل)
2. CSS (التنسيق)
3. Responsive Design (التجاوب)

كود HTML للـ Navbar

<header class="navbar"> <div class="logo">MySite</div> <ul class="nav-links"> <li><a href="#">الرئيسية</a></li> <li><a href="#">المقالات</a></li> <li><a href="#">الخدمات</a></li> <li><a href="#">اتصل بنا</a></li> </ul> <div class="menu-icon">☰</div> </header> نسخ الكود

شرح الكود:

• logo : اسم الموقع
• nav-links : روابط القائمة
• menu-icon : زر القائمة للموبايل

كود CSS الأساسي

.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: #222; } .logo { color: #fff; font-size: 22px; } .nav-links { list-style: none; display: flex; } .nav-links li a { color: #fff; padding: 10px; text-decoration: none; } نسخ الكود

جعل الـ Navbar متجاوب مع الشاشات الصغيرة

.menu-icon { display: none; font-size: 28px; color: #fff; cursor: pointer; } @media (max-width: 768px) { .nav-links { display: none; flex-direction: column; width: 100%; background: #333; } .menu-icon { display: block; } } نسخ الكود

تشغيل القائمة في الموبايل (JavaScript بسيط)

<script> const menu = document.querySelector('.menu-icon'); const nav = document.querySelector('.nav-links'); menu.onclick = () => { nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex'; }; </script> نسخ الكود

النتيجة النهائية

✔️ على الكمبيوتر: القائمة أفقية

✔️ على الموبايل: زر Menu

✔️ تصميم بسيط وسريع

✔️ مناسب لأي موقع أو قالب بلوجر

تحسين الـ Navbar لـ SEO وتجربة المستخدم

• استخدم روابط واضحة
• لا تكثر من العناصر
• تأكد من سرعة التحميل
• خلي القوائم سهلة النقر على الموبايل

أخطاء شائعة

❌ Navbar تقيل

❌ روابط صغيرة جدًا

❌ عدم اختبار الموبايل

❌ استخدام JavaScript معقد بدون داعي

خاتمة

بكود بسيط من HTML و CSS (ومسطر JavaScript صغير)، تقدر تعمل Navbar متجاوب واحترافي يعمل على كل الشاشات، ويحسن شكل الموقع وتجربة المستخدم.

المثال ده تقدر تستخدمه في:

• مواقع HTML
• قوالب بلوجر
• صفحات الهبوط
• مواقع شخصية