داشتن فرم جستجو در وب سایت تاثیر مثبتی بر روی تجربه کاربری دارد. در این مطلب قصد طراحی فرم جستجو ساده و جذاب برای یک وب سایت را داریم.
پیش تر در مطلب «فرم جستجو وردپرس» درباره روش اضافه کردن فرم جستجو به وردپرس صحبت کردیم. یکی از مشکلات فرم سرچ در سایت، محل قرار گیری آن است. این فرم به دلیل بزرگ بودن و داشتن عناصر مختلف نیازمند فضای زیادی برای قرارگیری در وب سایت است. اما یکی از روش ها، طراحی فرم جستجو در صفحه ای جداگانه و بازشونده است. در این روش با کلیک بر روی گزینه مورد نظر، فرم بر روی صفحه، نمایش داده می شود. برای پیاده سازی این روش از target ها در سی اس اس استفاده می کنیم. برای درک بهتر این موضوع به فرم سرچ سایت توسی مراجعه کنید. در این مطلب قصد طراحی این فرم جستجو جذاب و ساده با استفاده از HTML و CSS را داریم.
طراحی فرم جستجو
برای شروع کار ابتدا فرم جستجوی خود را طراحی می کنیم. در مرحله بعد قابلیت مخفی و نمایان شدن را بر روی آن پیاده سازی می کنیم. پس ابتدا کد HTML زیر را در جای مورد نظر خود قرار می دهیم. به دلیل نمایش تمام صفحه، تفاوتی در محل قرار گیری این کد وجود ندارد. برای مثال انتهای تگ body مکان مناسبی است.
<form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" name="s">
<input type="submit" value="جستجو">
</form>در این کد یک باکس با آی دی search برای درج تمام عناصر ایجاد کرده ایم. فرم استفاده شده نیز در آموزش «فرم جستجو وردپرس» توضیح داده شده است.
حال نوبت به نوشتن کد های CSS و طراحی فرم جستجو می رسد. برای این کار ابتدا باکس #search را با کد زیر به صورت تمام صفحه نمایش می دهیم. رنگ زمینه را به صورت تیره و شفاف تغییر و با استفاده از flex عناصر را در مرکز صفحه قرار می دهیم:
#search {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
}حال نوبت به طراحی و زیبا سازی عناصر فرم جستجو می رسد. برای این کار border ها را حذف کرده ایم. رنگ عناصر را طوری تعیین کرده تا از نظر تجربه کاربری (UX) بهینه باشیم. به صورت کلی بیشتر کد ها برای تنظیم محل قرار گیری عناصر و ایجاد فاصله بین آن ها است:
#search form {
width: 100%;
max-width: 250px;
display: flex;
flex-direction: column;
gap: 1em;
}
#search input {
width: 100%;
border: none;
background-color: #fff;
border-radius: 0.25em;
padding: 0.5em 1em;
}
#search div {
display: flex;
gap: 1em;
justify-content: flex-end;
}
#search a,
#search button {
border: none;
padding: 0.25em 1em;
border-radius: 0.25em;
color: #000;
font-weight: b;
}
#search button {
background-color: lightgreen;
}
#search a {
background-color: tomato;
}نمایش فرم سرچ با کلیک
تا اینجا ما طراحی فرم جستجو وب سایت خود را کامل کردیم. توانستیم یک فرم تمام صفحه بر روی تمام مطالب سایت نمایش دهیم. یک دکمه برای جستجو و یک دکمه برای خروج این صفحه نیز ایجاد کردیم. حال نیاز داریم تا کاربر با کلیک بر روی یک دکمه بتواند این صفحه را باز کند. و سپس با زدن دکمه «بستن»، آنرا ببندد. برای این کار از خاصیت target در CSS استفاده می کنیم. برای مثال کاربر با کلیک بر روی یک لینک با مقدار #search وارد آدرس https://tooc.ir/#search می شود. به این اتفاق «هدف قرار گرفتن آی دی search» می گوییم. حال در کد های سی اس اس می توان برای این عمل دستور نوشت.
پس از آشنایی با target ها، نوبت به اجرای عملیات باز و بسته شدن فرم سرچ می رسد. به صورت پیش فرض فرم جستجو باید مخفی باشد. پس باید کد بخش #search را به شکل زیر ویرایش کنیم:
#search {
display: none;
}این کد تمام طراحی فرم جستجو را مخفی می کند. حال با نوشتن حالت target می توان فرم را به کاربر نمایش داد. پس برای این کار کد زیر را به فایل CSS خود اضافه می کنیم:
#search:target {
display: flex;
}برای نمایش فرم جستجو باید یک لینک در جای مورد نظر خود، مانند منوی اصلی، با آدرس #search ایجاد کنیم. برای خروج از این صفحه هم از یک لینک با آدرس # استفاده می کنیم. با کلیک بر روی این لینک عملا هدف یا همان target از آدرس صفحه ما حذف می شود. در مثال ما باید آدرس لینک «بستن» را به مقدار # تغییر دهیم. خروجی نهایی کد ها را از لینک زیر دریافت کنید:
عالیه
ممنون
عالیه لطفا دوباره از این آموزش بزارید
چشم حتما