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

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

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

 

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

 

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

 

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

 

كما تعلم ، هذا برنامج CSS خالص يعني أنه يتم استخدام HTML و CSS فقط لإنشاء هذه القائمة الضخمة. إذا كنت مبتدئًا ويصعب عليك فهم كيفية تبديل شريط القائمة لإظهار أو إخفائه ، في استوعب مفهوم <input type = ”checkbox”> و <label> tag. في علامة التصنيف ، توجد سمة لـ وعلينا تمرير اسم معرف مربع الاختيار بالداخل للسمة للتحكم في مربع الاختيار من التسمية. وتجعل هذه القائمة الضخمة سريعة الاستجابة ، استخدمت خاصية CSS media.

 

قائمة ميجا سريعة الاستجابة قائمة منسدلة

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow