10 مقتطفات من كود CSS و JavaScript لإنشاء تنقلات سريعة الاستجابة

يعد التنقل أحد أكثر الأجزاء تعقيدًا في أي موقع جيد وسريع الاستجابة. قد يستغرق هذا بعض الوقت لمعرفة ذلك ، وهناك الكثير من البرامج التعليمية للمساعدة في ذلك. لكنني أيضًا معجب باستخدام مقتطفات التعليمات البرمجية مثل تلك التي جمعناها لهذه المقالة.

كل مقتطفات التنقل سريعة الاستجابة هذه مجانية للتعديل والاستنساخ لمشاريعك الخاصة. كما أنها تتميز بمجموعة متنوعة من الأنماط ، لذلك سيكون هناك شيء هنا يناسب جميع أنواع مواقع الويب.

1. تخطيط صفحة كاملة استجابة لجوني مانجو

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

شاهد العرض التوضيحي للملاحة المستجيبة باستخدام القلم مع Kube بواسطة جوني مانجو

2. القائمة المنسدلة Navbar بواسطة تانيا راسيا

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

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

انظر شريط التنقل المنسدلة المستجيب للقلم من تأليف تانيا راسيا

3. تخطيط صفحة واحدة بواسطة Jan Czizikow

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

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

شاهد التنقل سريع الاستجابة على Pen Pen مع الرسوم المتحركة لـ CSS و jQuery بواسطة Jan Czizikow

4. القائمة المنسدلة الحمراء بواسطة ستيفاني والتر

قامت المطورة ستيفاني والتر ببناء بعض المشاريع المثيرة للويب. هذا المقتطف هو مجرد مثال واحد يعرض التنقل سريع الاستجابة باللون الأحمر الفاتح.

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

شاهد التنقل متعدد المستويات Pen Responsive navigation لستيفاني والتر

5. تصميم Pure CSS لأحمد حجازي

إليك تصميم فريد باستخدام CSS خالص للتنقل. إنها قائمة عمودية بها روابط تنقل تحاكي الجدول الدوري للعناصر.

تأثيرات التحويم متأخرة قليلاً ولكنها مثيرة للاهتمام بلا شك. ناهيك عن أن الأسلوب سريع الاستجابة يمكن استخدامه بشكل مدهش. ربما يكون الجزء الأكثر إثارة للإعجاب هو كيف يستخدم هذا المثال بأكمله CSS فقط .

انظر إلى قائمة التنقل المستجيب لـ Pen CSS بواسطة أحمد حجازي

6. رأس مثبت متجاوب بواسطة مارك ليبوناو

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

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

انظر رأس ملاحة مستجيب للقلم من MarcLibunao

7. مستجيبة وصديقة للمس من Dragoeco

يجب أن تكون جميع مواقع الويب الجيدة صديقة للمس افتراضيًا ، وهذا ما يجعل التنقل أكثر جاذبية للمصممين.

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

شاهد قائمة التنقل المنسدلة للقلم: سريع الاستجابة وسهل اللمس بواسطة Dragoeco

8. روابط تنقل بسيطة بواسطة AnabolicHippo

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

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

أود أن أزعم أن هذا يعمل بشكل أفضل مع المواقع التي تحتوي على قوائم فرعية قليلة أو لا تحتوي على قوائم فرعية ، ولكن الأمر يستحق المحاولة على الهاتف المحمول لمعرفة رأيك في التجربة.

راجع قائمة التنقل المستجيب للقلم من خلال AnabolicHippo

9. قائمة ستائر البلاي ستيشن بواسطة لويس تشينيس

أنشأ المطور Louis Chenais أحد التنقلات المتجاوبة المفضلة لدي استنادًا إلى موقع PlayStation على الويب. يسمي لويس هذه "قائمة الستائر" حيث تنزلق للعرض وتتجاوز الصفحة بأكملها. هذا أمر شائع بالنسبة لواجهات الهاتف المحمول ، وسرعان ما أصبح شائعًا لمصممي الويب أيضًا.

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

انظر إلى مبدأ التنقل المستجيب للقلم # 3 - قائمة الستارة بواسطة لويس تشينيس

10. قائمة مستجيبة ميجا من سمير آلي

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

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

انظر قائمة Pen Responsive Mega Menu - Navigation by samir alley