Student Reviews
( 5 Of 5 )
1 review
Video of Dropdown Menu ديناميكية الطريقة الصحيحة لبرمجة قوائم المواقع in JavaScript applications course by Mohammed Code محمد كود channel, video No. 1 free certified online
رابط المقال هيفيدك https://www.mohammedcode.com/dropdown-menu-javascript-tutorial/
في هذا الفيديو من سلسلة تعلم JavaScript، ستتعلم كيفية بناء قائمة تنقل (Navigation) و قائمة منسدلة (Dropdown Menu) باستخدام JavaScript فقط وبدون أي مكتبات خارجية.
محتوى الفيديو:
00:00 مقدمة البث والتعريف بموضوع الحلقة.
00:45 تجهيز بيئة العمل وإنشاء ملفات المشروع (HTML & JS).
02:28 شرح طرق كتابة واستدعاء كود الجافا سكريبت (Internal vs External).
04:40 التمرين الأول: برمجة قائمة التنقل للهواتف (Mobile Navigation).
08:50 تنسيق القائمة الجانبية باستخدام CSS.
14:37 إضافة تأثيرات الظهور والاختفاء (Transform & Transition).
16:30 كتابة كود JS للتحكم في فتح وإغلاق القائمة باستخدام addEventListener.
26:40 شرح وظيفة classList.toggle لتبديل الحالة البرمجية.
27:37 إضافة وتنسيق أيقونات Font Awesome للمشروع.
34:03 التمرين الثاني: برمجة القوائم المنسدلة الديناميكية (Dynamic Dropdown Menu).
38:40 توزيع العناصر وتنسيق الـ Dropdown باستخدام CSS Positioning.
44:40 ربط القائمة المنسدلة بالجافا سكريبت وإظهارها عند النقر.
50:10 إضافة اللمسات النهائية وتنسيق حالة النشاط (Active State).
ستتعلم:
كيفية التحكم في إظهار وإخفاء عناصر القوائم
التفاعل مع المستخدم عبر الأحداث (Events)
إضافة تأثيرات بصرية بسيطة على القوائم
جعل القائمة متجاوبة وأساسية لتصميم أي موقع حديث
مناسب للمبتدئين وأصحاب المشاريع الذين يرغبون في فهم الأساسيات العملية لـ JavaScript في تطوير واجهات المستخدم.
#JavaScript #تعلم_جافا_سكريبت #Dropdown_Menu #Navigation #برمجة_واجهات #قوائم_تفاعلية #Frontend #تطوير_ويب #تصميم_مواقع #javascript_بالعربي