--- title: How to Create a Dropdown Menu with CSS and JavaScript localeTitle: كيفية إنشاء قائمة منسدلة باستخدام CSS و JavaScript --- ## كيفية إنشاء قائمة منسدلة باستخدام CSS و JavaScript ستتعلم في هذا البرنامج التعليمي كيفية إنشاء قائمة منسدلة بسيطة باستخدام الفانيلا Javascript و HTML و CSS. سنسير عبر شفرة HTML و CSS وجافا سكريبت ، ولكن نولي المزيد من الاهتمام للبرمجة ، نظرًا لأن هذا البرنامج التعليمي تابع لبرنامج JS. سنستخدم فقط JS و CSS بدون أي إطارات أو معالجات مسبقة. الاستثناء الوحيد (نوع) سيتم استيراد ملف [Font Awesome](https://fontawesome.com/) CSS لأننا سنستخدم أحد رموزه. يستهدف هذا المطورين الذين لديهم فهم متوسط لـ HTML و CSS و JS. حاولت أن أجعله نظيفًا قدر الإمكان ، لكنني لن أركز كثيرًا على التفاصيل هنا. آمل أن تستمتع جميع. ## لقطات هذه هي الطريقة التي تبدو بها نتيجة الشفرة: الشاشة الأولي: ![](https://i.imgur.com/jrnu6mE.png) فتح القائمة المنسدلة: ![](https://i.imgur.com/gszPtRa.png) المنسدلة مع اختيار الخيار: ![](https://i.imgur.com/TKXxZGF.png) #### HTML: في هذا القسم ، سنناقش تنفيذ شفرة HTML للصفحة التجريبية. للبدء ، دعنا نرى الرمز `
` `