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

لا شك في أنه يمكنك إنشاء قائمة هاتف محمول قابلة للتبديل باستخدام أطر عمل CSS مثل TailWind أو BootStrap.

لكن ما هو المفهوم الكامن وراء ذلك؟ وكيف يمكنك صنع واحد من الصفر دون الاعتماد على أطر CSS هذه؟

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

كيفية إنشاء قائمة الهاتف المحمول الخاصة بك Togglable

إذا لم تكن قد قمت بذلك بالفعل ، فافتح مجلد مشروعك وأنشئ ملفات مشروعك (HTML و CSS وجافا سكريبت).

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

سنبدأ مع لغة البرمجة:

 قم بإنشاء ثلاثة divs لتمثيل شريط القائمة المنسدلة المكون من ثلاثة أسطر 








 أضف تنقلاتك هنا 


الصفحة الرئيسية
حول
اتصال

CSS:

/ * هذا القسم مخصص فقط لغرض البرنامج التعليمي * /
قسم{ 
العرض: 800 بكسل ؛
الارتفاع: 600 بكسل ؛
أعلى الهامش: 50 بكسل ؛
الهامش الأيسر: 250 بكسل ؛
الحدود: أسود صلب 1 بكسل ؛
الخلفية: # e6e3dc؛





instagram viewer


}
/ * ضع حاوية divs في DOM * /
# تبديل-حاوية {
عرض: شبكة ؛
العرض: محتوى مناسب ؛
الهامش الأيسر: 720 بكسل ؛
أعلى الهامش: 10 بكسل ؛
}
/ * قم بتكديس ثلاث divs فوق بعضها البعض. ثم حدد الارتفاع والعرض لهم. * /
#واحد اثنين ثلاثة{
الخلفية: أسود ؛
العرض: 30 بكسل ؛
الارتفاع: 3 بكسل ؛
أعلى الهامش: 5 بكسل ؛
} 
.toggle-content {
عرض لا شيء؛
الهامش الأيسر: 700 بكسل ؛
أعلى الهامش: 20 بكسل ؛
}
.toggle-content a {
العرض محجوب؛
زخرفة النص: لا شيء ؛
لون أسود؛
حجم الخط: 30 بكسل ؛
}
.toggle-content a: مرر {
لون أزرق؛
}
/ * عرض مثيل الفئة الذي تم إنشاؤه بواسطة JavaScript في الكتلة * /
.عرض{
العرض محجوب؛
}

أضف JavaScript:

var toggler = document.getElementById ("toggle-container") ؛
var toggleContents = document.getElementById ("toggle-content") ؛
document.addEventListener ("انقر" ، الوظيفة () {
// قم بتطبيق intance للفصل على كل تنقل واضبط العرض على التبديل:
toggleContents.classList.toggle ("معروضة") ؛
});

إليك كيف يبدو إخراج العمل عند النقر فوق شريط القائمة:

القائمة قابلة للتبديل ، لذا يؤدي النقر فوق الشريط مرة أخرى - أو في أي مكان داخل الصفحة - إلى إخفاء التنقلات.

متعلق ب: نمط عناصر موقع الويب مع تدرج خلفية CSS

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

// أضف حدث النقر إلى صفحة الويب الخاصة بك:
window.onclick = وظيفة (حدث) {
// استهدف حدث النقر على شريط القائمة للسماح لهيئة صفحة الويب بتعقبها:
إذا (! event.target.matches ('# toggle-container')) {
var المنسدلة = document.getElementsByClassName ("toggle-content") ؛
// إخفاء التنقلات بالتمرير عبر كل منها:
لـ (var i = 0 ؛ أنا var انخفض = القوائم المنسدلة [i] ؛
إذا (drop.classList.contains ('display')) {
drop.classList.remove ("عرض") ؛
}
}
}
}

إذن ، هذا ملخص لما فعلته للتو: لقد أنشأت ثلاثة أسطر باستخدام شعبة علامة HTML. قمت بتعديل ارتفاعها وعرضها ووضعها في DOM الخاص بك. ثم أعطيت هذه حدث نقرة باستخدام JavaScript.

متعلق ب: كيفية إنشاء موقع على شبكة الإنترنت: للمبتدئين

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

متعلق ب: اتجاهات التصميم Neumorphic في HTML و CSS و JavaScript

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

كن أكثر إبداعًا عند إنشاء موقع الويب الخاص بك

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

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

كيفية إعادة استخدام أجهزتك القديمة مثل المحترفين

هل لديك الكثير من التقنيات القديمة التي تشوش منزلك؟ اكتشف بالضبط ما يجب فعله به في دليل إعادة التدوير التقني هذا!

اقرأ التالي

نبذة عن الكاتب