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

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

يمكنك إنشاء مثل هذه المكونات باستخدام مكتبة مثل Tailwind ، ولكن من المفيد أيضًا معرفة كيفية إنشائها من البداية.

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

قم بإنشاء بنية المحتوى باستخدام HTML

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

لغة البرمجة>
<لغة البرمجةلانج="ar">
<رأس>
<ميتامحارف="UTF-8" />
<ميتاhttp-equiv="متوافق مع X-UA"محتوى="IE = حافة" />
<ميتااسم="منفذ العرض"محتوى="العرض = عرض الجهاز ، المقياس الأولي = 1.0" />
<النصيsrc=" https://kit.fontawesome.com/d69fb28507.js"كروس أوريغين="مجهول">النصي>
<عنوان>شريط البحث المخفيعنوان>
رأس>


<جسم>
<شعبةفصل="الأبوين">
<مدخلفصل="مدخل"يكتب="يكتب"نائب="يبحث..." />







instagram viewer



<زرفصل="btn">
<أنافصل="عدسة مكبرة fa-solid fa">أنا>
زر>
شعبة>
جسم>
لغة البرمجة>

صمم الواجهة باستخدام CSS

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

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

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

* {
هامِش: 0;
حشوة: 0;
تحجيم الصندوق: مربع الحدود;
}
جسم {
لون الخلفية: # d9d9d9;
ارتفاع: 100ه;
عرض: ثني;
محاذاة العناصر: مركز;
تبرير المحتوى: مركز;
}


.الأبوين {
موضع: نسبي;
}


.مدخل {
الخطوط العريضة: لا أحد;
حدود: لا أحد;
نصف قطر الحد: 100مقصف;
حشوة: 5مقصف 10مقصف;
عرض: 40مقصف;
انتقال: عرض 0.3 ثانيةيُسَهّل;
}


.مدخل:: نائب {
لون: أخضر;
}


.الأبوين.نشيط.مدخل {
عرض: 200مقصف;
}


.btn {
عرض: 40مقصف;
حشوة: 5مقصف 10مقصف;
المؤشر: المؤشر;
نصف قطر الحد: 100مقصف;
حدود: لا أحد;
خلفية: أخضر;
عرض: في النسق;
مربع الظل: 0 0 5مقصفrgba(0, 0, 0, 0.2);
موضع: مطلق;
قمة: 0;
غادر: 0;
انتقال: تحول 0.3 ثانيةيُسَهّل;
}


.الأبوين.نشيط.btn {
تحول: ترجمة س(210مقصف);
}
.fa-solid {
لون: #ffffff;
}

يجب أن يكون لديك زر بحث يبدو كالتالي:

أضف وظائف JavaScript

بعد ذلك ، اكتب كود JavaScript للعناصر. أولاً ، حدد عناصر الأصل والمدخلات والأزرار باستخدام JavaScript محدد الاستعلام () طريقة.

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

يترك الإدخال = وثيقة.querySelector (".مدخل");
يترك btn = وثيقة.querySelector (".btn");
يترك الوالد = وثيقة.querySelector (".الأبوين");
btn.addEventListener ("انقر", () => {
 parent.classList.toggle ("نشيط");
 input.focus () ؛
});

إذا قمت بالنقر فوق الزر ، فإنه يفتح شريط البحث والعكس صحيح. يظهر كما هو موضح في الرسم البياني التالي:

الآن ، إذا قمت بكتابة المعلومات والنقر فوق الزر ، فسيتم إغلاقه أثناء بحث النظام عن المعلومات.

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

الميزات الأخرى التي يمكنك إنشاؤها

كمبتدئ في تطوير الويب ، هناك العديد من الميزات التي يمكنك إنشاؤها باستخدام HTML و CSS و JavaScript. يمكنك إنشاء نافذة منبثقة / مشروطة ، ومنزلق للصور ، ومُحدِّث تلقائي للتذييل ، وغير ذلك الكثير.

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