كيفية إنشاء شريط قائمة منزلق باستخدام HTML و CSS و JavaScript

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

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

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

هيا بنا نبدأ

فيما يلي رمز HTML لشريط التمرير. إنها نسخة أساسية عارية.

 Click here 

Slider

Twitter

@Supriya

@Girish

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

الآن قم بتصميم شريط القوائم في CSS. انتبه لتفاصيل التصميم.

.slider-container { position: relative; } .slider-container .slider-parent { height: 70vh; max-width: 250px; width: 100%; background: #6C7A89; position: absolute; left: -250px; top: 50px; visibility: hidden; opacity: 0; pointer-events: none; transition: .2s all linear; } .slider-container .slider-parent.active { visibility: visible; pointer-events: inherit; transition: .2s all ease-in-out; opacity: 1; left: 0; }

دعنا الآن نفصل المقتطف أعلاه ونناقش كيف يعمل.

يحدد Maxwidth الحد الأقصى للعرض الذي يمكن أن تشغله div. في نافذة أصغر ، يمكن أن تشغل أقل من 250 بكسل. يحتل div 250 بكسل عندما تكون النافذة ممتدة على طول الشاشة.

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

للمضي قدمًا ، دعنا نلقي نظرة على سبب اليسار: -250 بكسل؟ يتم ذلك للحصول على هذا الإجراء الانزلاقي السلس للقائمة. لاحظ أن قيمة اليسار سالبة ، مما يخبرنا أن القائمة تبدأ 250 بكسل على يسار موضع البداية (وهو 0). لذلك فهو غير موجود حاليًا في المنطقة المرئية.

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

رائع! تم الانتهاء من شريط التمرير الأساسي!

الآن بعد أن تم الانتهاء من شريط التمرير الأساسي ، دعنا نفهم ما يحدث عندما يكون شريط التمرير نشطًا - أي عندما يتم النقر فوق علامة الربط التي تفتح شريط القائمة.

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

قد تتساءل أيضًا: لماذا بقي الآن : 0؟ في السابق ، كان شريط التمرير خارج الشاشة. الآن بعد أن أردنا أن تبدأ القائمة من الجانب الأيسر من الشاشة ، نغير قيمة اليسار إلى 0.

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

تم التنفيذ! لقد صممت المكونات ، فما هي الخطوة التالية؟ جافا سكريبت! ستضع كل هذا موضع التنفيذ.

إضافة بعض JavaScript

var sliderTrigger = document.getElementsByClassName("slider-trigger")[0];var slider = document.getElementsByClassName('slider-parent')[0];
sliderTrigger.addEventListener( "click" , function(el){
if(slider.classList.contains("active")){ slider.classList.remove("active"); }else{ slider.classList.add("active"); }
});

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

sliderTrigger.addEventListener( "click" , function(el) {} );

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

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

slider.classList.contains("active")

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

slider.classList.add("active")
slider.classList.remove("active")

فويلا يتم ذلك !! انظر من يصفق؛)

يظهر عمل نفس الكود أدناه في CodePen.

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

جيثب ريبو من جيالتر

مؤشر Twitter: Supriya S و Girish Patil

شكرا لك. ترميز سعيد :)

تحقق من المنتجات من قبلنا:

paybackhub.com و certhive.com