كيفية إضافة شريط تنقل متجاوب مع الجوال إلى Carrd

Carrd هو أداة شائعة لبناء مواقع الويب البسيطة ذات الصفحة الواحدة بسرعة وكفاءة. ومع ذلك، عندما يتعلق الأمر بتنفيذ شريط تنقل متجاوب مع الجوال، يمكن أن تختلف العملية في التعقيد والوظائف. إليك مقارنة بين ثلاث طرق مختلفة لإنشاء شريط تنقل متجاوب مع الجوال باستخدام Carrd، مع تسليط الضوء على إيجابيات وسلبيات كل منها.

ما هو شريط التنقل المتجاوب مع الجوال؟

شريط التنقل المتجاوب مع الجوال هو قائمة تنقل تتكيف بسلاسة مع أحجام الشاشات المختلفة، مما يوفر تجربة مستخدم مثالية على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. يضمن أن يكون موقع الويب الخاص بك سهل التنقل بغض النظر عن الجهاز المستخدم.

ما هو قائمة الهامبرغر؟

قائمة الهامبرغر هي نوع من قوائم التنقل التي تُستخدم عادةً في تصميم الويب المتجاوب والمحمول. سميت بهذا الاسم بسبب أيقونتها التي تتكون من ثلاثة خطوط أفقية تشبه الهامبرغر. عند نقر المستخدم أو النقر على الأيقونة، تتوسع القائمة الكاملة أو تنزلق للخارج، مما يوفر الوصول إلى الصفحات أو الأقسام المختلفة للموقع. يساعد هذا التصميم في توفير مساحة الشاشة والحفاظ على واجهة نظيفة وغير مزدحمة، خاصة على الأجهزة الأصغر.

كيفية إضافة شريط تنقل متجاوب مع الجوال؟

الدرس #1: باستخدام عناصر Carrd الأصلية

الرابط: https://starrt.co/blog/mobile-responsive-nav-menu

الإيجابيات:

• مجاني: لا توجد تكلفة متضمنة في اتباع هذا الدرس.

السلبيات:

• مرهق: تتضمن عملية الإعداد 7 خطوات رئيسية و15 خطوة فرعية، مما يجعلها تستغرق وقتًا طويلاً.
• غير ثابت/غير عائم: لا يبقى شريط التنقل ثابتًا في أعلى الشاشة أثناء التمرير، مما قد يؤثر على سهولة الاستخدام.

الدرس #2: استخدام كود مخصص في Carrd

الرابط: https://www.bitdoze.com/carrd-mobile-navbar/

الإيجابيات:

• متجاوب: يضمن أن شريط التنقل يتكيف جيدًا مع أحجام الشاشات المختلفة.

السلبيات:

• مدفوع: يتطلب اشتراكًا للوصول إلى ميزة الكود المخصص.
• معقد: تحتاج إلى تعلم HTML/CSS لتطبيق الكود المخصص.
• لا يوجد معاينة في محرر Carrd: لا يمكن معاينة التغييرات مباشرة في محرر Carrd، مما يجعل العملية أكثر تعقيدًا.

الدرس #3: استخدام slidde.co

الرابط: https://sticky.slidde.co/

الإيجابيات:

• مجاني: لا توجد تكلفة لاستخدام هذا الحل.
• ثابت/عائم: يبقى شريط التنقل ثابتًا في أعلى الشاشة أثناء التمرير، مما يعزز سهولة الاستخدام.
• سهل: عملية الإعداد تتضمن خطوتين بسيطتين فقط، مما يجعله سهل الاستخدام للغاية.
• قابل للتخصيص: على الرغم من سهولته، يمكن تخصيص الأيقونات وتنسيق الأزرار بسهولة.

السلبيات:

• منتج جديد: كونه جديدًا نسبيًا، قد يفتقر إلى بعض الميزات المتقدمة التي تقدمها الحلول الأكثر رسوخًا.

الخلاصة

اختيار الطريقة المناسبة لإنشاء شريط تنقل متجاوب للجوال في Carrd يعتمد على احتياجاتك الخاصة وخبرتك التقنية. الدروس #1 و #2 تقدم طرقًا مختلفة لاستخدام Carrd لتحقيق هذه الوظيفة، بمستويات مختلفة من التعقيد والتخصيص. الدرس #3، من ناحية أخرى، يستخدم أداة جديدة لتحقيق نفس الوظيفة بعملية إعداد أبسط. قم بتقييم هذه الخيارات بناءً على أولوياتك لتحسين تنقل موقعك بفعالية.