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

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

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

 

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

 

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

 

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

 

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

 

قائمة منسدلة سريعة الاستجابة مع شريط البحث

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow