قائمة سريعة ومريحة وقابلة للتكيف مع 1075 فئة (36000 منتج)

لفترة وجيزة عن القائمة

• 99 ٪ HTML5 + CSS3 القائمة ، 1 ٪ جافا سكريبت (إغلاق فئة مفتوحة عن طريق النقر).
• على الأجهزة المحمولة ، تصبح القائمة "الأفقية" "قائمة الأكورديون".
• في الحالة الأولية ، يتم عرض 10 من 33 عنصرًا من عناصر القائمة الرئيسية ، وتظهر العناصر المتبقية عند النقر فوق العنصر 11 (أقصى اليمين) "المزيد ...".
• "وقت التحميل للتفاعل" لصفحة الفئة مع القوائم والمنتجات على الكمبيوتر هو ثانية واحدة ، وعلى 5.2 ثانية للجوال (وفقًا لـ developers.google.com).
• يبلغ "وقت تحميل المحتوى الأول" لصفحة الفئة التي تحتوي على قوائم ومنتجات على جهاز كمبيوتر 0.3 ثانية ، على الجوال 1 ثانية (وفقًا لـ developers.google.com).
• يتم فتح وإغلاق فئات القائمة بالضغط ، بعد فتح الرمز "+" يتغير إلى "-".
• عند فتح عناصر قائمة أخرى ، يتم إغلاق العناصر المفتوحة مسبقًا.
• يتم وضع الفئات الفرعية والفئات الفرعية الفرعية لقوائم القوائم على سطح المكتب في منفذ العرض بدون شريط تمرير.

متطلبات القائمة

• فتح قائمة عن طريق الضغط ... حول قائمة مع فتح على التحويم: عند فتح صفحة ، فإن 99٪ من الأشخاص يعبرون القائمة بالماوس ، مما يتسبب في ظهورها غير المخطط له ، مما يؤدي إلى إغلاق الجزء المرئي من الشاشة ، وبالتالي إزعاج الزائر. يمكنك حل هذا عن طريق تشغيل تأخير التحويم (بحيث لا يفتح على الفور) ، ولكن بعد ذلك تصبح قائمة "الفرامل".
• قائمة بسيطة لمزيد من التعديلات الممكنة من قبل موظفي المتجر بعد الإحاطة.
• يجب أن تكون القائمة قابلة للتكيف ، ويجب أن تخضع الصفحة مع القائمة للتحقق الكامل من css3 html5. يجب أن تظل سرعة تحميل الصفحة سريعة.

يمكن الاطلاع على النسخة الكاملة من القائمة codepen.io/andrej-sh/pen/eYOrNEZ

بداية كود HTML

شرح كود جافا سكريبت

لقد خططت للاستغناء عن جافا سكريبت ، ولكن يبدو أن تطبيق إغلاق القائمة المفتوحة عندما قمت بالنقر فوق CSS مرة أخرى لم يتم تطبيقه على خانة الاختيار الراديو +. والرمز بسيط وواضح ، وحتى إذا تم حذفه عن طريق الخطأ ، فإنه لا يمكن أن يجعل الموقع لا يعمل (عند اختبار القائمة باستخدام jQuery ، فإن الموقع لا يعمل لمدة 5 دقائق بسبب حقيقة أنه قام أولاً بتوصيل البرنامج النصي عن بُعد وكان الارتباط به http بدلاً من https).

<script> function clickRadio(el) { var siblings = document.querySelectorAll("input[type='radio'][name='" + el.name + "']"); for (var i = 0; i < siblings.length; i++) { if (siblings[i] != el) siblings[i].oldChecked = false; } if (el.oldChecked) el.checked = false; el.oldChecked = el.checked; }</script> 

قائمة مماثلة باستخدام مسج

كان الإصدار الأول من القائمة في jQuery ، تم تنفيذه من خلال "خانة اختيار" الإدخال. حتى من خلال البرنامج النصي ، تم تكوين مظهر الأحرف "+ -" عند فتح وإخفاء القائمة. من حيث الأداء الوظيفي والمظهر ، فهو مماثل تمامًا كما هو الحال في القائمة الموضحة مسبقًا. ولكن! كانت سرعة التنزيل أسوأ بشكل ملحوظ. على سبيل المثال ، يصبح "الحد الأقصى لتأخير FID" لمدة ثانية واحدة. "وقت تنزيل التفاعل" أطول من 0.6 إلى 0.8 ثانية. "وقت تنزيل المحتوى الأول" بمقدار 0.3-0.4 ثانية. تحميل البرامج النصية 0.5 ثانية أطول.

صور من خدمات التحقق من سرعة التنزيل