نواصل نشر آخر لتصميم الويب مع ملف قائمة جيدة بقوائم CSS مع تصميم سريع الاستجابة. سلسلة من قوائم CSS مخصصة حصريًا لهذا التنسيق والتي لا تتجاوز عادةً 768 بوصة والتي تتيح لنا تجهيز موقعنا الإلكتروني للزوار للدخول إليه من هواتفهم الذكية.
الحقيقة هي أن كل قائمة من قوائم CSS التسعة بتصميم محمول ستجدها أدناه هم من أناقة كبيرة وهي مجهزة بسلسلة من الرسوم المتحركة وتصميم عالي الجودة والتفاصيل. لا تفوت هذه السلسلة من القوائم الدائرية بهذا الشكل الفريد لعرض الأقسام المختلفة لموقعنا.
قائمة الأجهزة المحمولة البسيطة
قائمة بسيطة للجوال من الإنشاءات الحديثة والتي تأخذنا مباشرة إلى المعيار الحالي لتصميم الويب للأجهزة المحمولة. قائمة استجابة كاملة باستخدام Bootstrap 3.x و FontAwesome و CSS flexbox و CSS BEM Syntax. قائمة بسيطة مصممة بشكل جيد للغاية وتعتمد على بساطتها في الإعجاب.
قائمة ماجيكال موبايل ميجا
تسمح لنا القوائم الضخمة بإضافة أعمدة وعناصر واجهة مستخدم وكل تلك السلسلة من العناصر الضرورية توجيه حركة المرور إلى موقعنا الويب. هذه القائمة الجانبية سريعة الاستجابة للهاتف الذكي بسيطة للغاية وستجد جميع الأقسام هي المساحة الوحيدة التي يستخدمها بشكل ثابت.
تطبيق الملاحة
نحن نواجه قائمة سريعة الاستجابة أكثر من مجرد مفهوم. إذا كنت تبحث عن شيء ما يختلف عن المعيار الحالي في القوائم المحمولة ، يمكن أن تكون هذه القائمة مناسبة تمامًا. من أيقونة الهامبرغر ، يمكنك تمديد سلسلة علامات التبويب التي يمكنك من خلالها الوصول إلى جميع صفحات موقع الويب.
الرسوم المتحركة للملاحة المتنقلة
تختلف هذه القائمة سريعة الاستجابة عن الباقي بواحد أكثر من لطيف الرسوم المتحركة الانتقالية منذ أن نضغط على قائمة الهامبرغر بتصميم قطري. كما أنه يكلف رسومًا متحركة في محدد التمرير لمنحه مزيدًا من الديناميكية. استخدم للرسوم المتحركة GSAP TweenMax و TimelineMax.
مفهوم التنقل في واجهة مستخدم SVG
الرسوم المتحركة SVG و CSS3 لقائمة أصلية حقًا تأخذك إلى انتقال إبداعي للغاية وتبرز من بقية القوائم المتجاوبة في هذه القائمة. أيضا ملحوظ له لون رائع وله تأثير كبير يمكن أن يمنحها لمساحة الويب الخاصة بك عند عرضها من جهاز محمول مثل الكمبيوتر اللوحي.
معلومات التفاصيل والملاحة
يشبه إلى حد كبير سابقه في تصميم واستخدام الألوان ، على الأقل في التكوين الأولي ، لكنه يختلف هذه المرة بمقدار قائمة دائرية سريعة الاستجابة الذي يقع على جانب الشاشة. الرسوم المتحركة سلسة للغاية وهي قائمة أخرى سريعة الاستجابة بلمسة رائعة لجعل موقعنا على الإنترنت متميزًا عن الهاتف المحمول أو الجهاز اللوحي.
التنقل المحمول Gooey
هذا تأثير "Gooey" مطبق جيدًا على قائمة نمط الهاتف المحمول يعتمد على انتقالات CSS و jQuery للرسوم المتحركة. إنها عبارة عن سلسلة من الأزرار التي تفتح عند النقر على أيقونة الهامبرغر الموجودة في منتصف الجزء السفلي من الشاشة. واحدة أخرى من تلك القوائم سريعة الاستجابة والتي لا تزال حديثة للغاية.
Frosty Nav «تبديل» التأثير
تحاول هذه القائمة سريعة الاستجابة تطبيق ملف حركة سلسة بمجرد الضغط على الزر همبرغر. التأثير الذي تقوم به هو ضبابية بحيث تكون خلفية الشاشة غير واضحة ويمكننا التمييز بشكل أفضل بين كل قسم من الأقسام التي يمر من خلالها زوار موقعنا. لدينا بعض الرسوم المتحركة البسيطة لكل فئة من الفئات دون ضجة كبيرة ، ولكن بتأثير كبير.
قائمة المحمول
انتهينا من هذه السلسلة من القوائم المستجيبة للجوال بجودة رائعة. دون أن ننسى أولاً أنه يمكنك تصفح سلسلة أخرى من القوائم لتمييز موقع الويب الخاص بك ، هذه فقط في وضع ملء الشاشة.
قائمة الجوال هي واحدة من تلك يتميز بتأثير jQuery وأنه مبرمج في كل من HTML و CSS. إنه بسيط للغاية في تكوينه ، ولكنه بالتأكيد قادر على إعطاء تلك اللمسة المتميزة لموقعنا على الويب.