آموزش نحوه ایجاد جعبه جستجو در طراحی سایت

یکی از موارد ضروری و پرکاربرد در طراحی سایت، بخصوص سایت های فروشگاهی وجود جعبه جستجو می باشد، جعبه جستجو نه تنها قابلیت استفاده از سایت را افزایش می دهد بلکه نظم خاصی به سایت می دهد بصورتیکه کاربران به راحتی در سایت جستجو می کنند و محصولات یا مطالب مورد نظر خود را می یابند.جعبه جستجو باعث می شود بازدیدکنندگانی که قبلا هم به سایت شما سرزده اند بدانند چه می خواهند و به دنبال چه چیزی هستند و به راحتی آن را بیابند.از طرفی برخی کاربران حوصله و زمان جستجو در میان مطالب و محصولات متنوع را ندارند و مایل هستند با جستجویی سریع مطالب موردنظر خود را بیابند که اگر به این نیاز توجه نکنید این دسته از کاربران را از دست خواهید داد.

با گسترش تلفن های همراه هوشمند و اپلیکیشن های موبایل فیلد جستجو تبدیل به یکی از موارد مهم در طراحی سایت شده است و باید به نحوی در سایت قرار بگیرد که بتوان توسط وسایل مختلف هوشمند به راحتی قابل تایپ و جستجو باشد.
در این مقاله طراحی سایت نحوه قرار دادن فیلد جستجو در سایت را باهم می آموزیم، با سروش پرداز همراه باشید.
ویژگی های این آموزش:

1. بدون نیاز به کدهای جی کوئری
2. بدون نیاز به اضافه کردن کدهای جاوا اسکریپت
3. ویجتی ساده با سرعت بارگذاری سریع
4. امکان تطبیق با هر مرورگری
5. کدهای نوشته شده با CSS3

برای ایجاد فیلد جستجو کد زیر را در بلاگ یا سایت خود قرار دهید:
کد CSS:

در کد زیرid فیلد را search-box تعریف کرده ایم و با قرار دادن position:relative کد را به نحوی تعریف کرده ایم که فیلد ایجاد شده در هر وسیله ای قابل نمایش و واکنشگرا باشد.
<style>

[تنها اعضای سایت قادر به دیدن لینکها هستند. ] {

position: relative;

width: 100%;

margin: 0;

}

در قسمت Search-form طول، عرض و ارتفاع و رنگ فیلد جستجو را تعیین کرده ایم.قطعه کد با ای دی Search-text برای تعیین رنگ و سایز و ویژگی های فونت تایپی فیلد می باشد.

[تنها اعضای سایت قادر به دیدن لینکها هستند. ] {

height: 40px;

border: 1px solid [تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background-color: [تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;

overflow: hidden;

} [تنها اعضای سایت قادر به دیدن لینکها هستند. ] : مقادیر ورودی جستجو را از کاربر دریافت می کندهمانطور که می بینید مقادیر ورودی از نوع text تعریف شده است.
[تنها اعضای سایت قادر به دیدن لینکها هستند. ] {

font-size: 14px;

color: [تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;

border-width: 0;

background: transparent;

} در کد زیر id برای دریافت مقادیر ورودی تعریف شده، نوع ورودی از نوع text تعریف شده که تمامی ورودی های اعم از حروف و اعداد را دریافت می کند.

width: 90%;

padding: 11px 0 12px 1em;

color: #333;

outline: none;

}

و در نهایت برای دکمه جستجو کد زیر تعریف می شود که موقعیت آن absolute تعریف شده است همانطور که دیدید در قطعه کد search-box موقعیت را بصورت relative تعریف کردیم که فیلد جستجو در تمامی صفحات واکنشگرا باشد حال موقعیت دکمه را absolute تعریف می کنیم که نسبت به فیلد جستجو در صفحه جابجا شود به نحوی که واکنشگرایی سایت حفظ شود.
[تنها اعضای سایت قادر به دیدن لینکها هستند. ] {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: [تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: [تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<style>
[تنها اعضای سایت قادر به دیدن لینکها هستند. ] {position:fixed;top:0;left:0;width:100%;height:100 %;background:#000000;opacity:0.8;z-index:9999999;}
[تنها اعضای سایت قادر به دیدن لینکها هستند. ] {position:fixed;top:0;left:0;width:100%;height:100 %;background:#000000;opacity:0.8;}
[تنها اعضای سایت قادر به دیدن لینکها هستند. ] _Data{position:absolute;top:50%;left:50%;width:300 px;height:100px;margin:-50px 0 0 -150px;color:[تنها اعضای سایت قادر به دیدن لینکها هستند. ] FFF;z-index:9999;}
</style>
<style>
.search-form-wrapper{background:#000;background:rgba(0,0,0,.;z-index:99;position:fixed;width:100%;height:100%;lef t:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:[تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed [تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;font-size:60px;color:[تنها اعضای سایت قادر به دیدن لینکها هستند. ] ;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}
</style>

در زیر قطعه کد html ای دی های کد css بالا نوشته شده است:
کد HTML:

<div id="search-box">

<form action="/search" id="search-form" method="get" target="_top">

<input onclick="document.getElementById(&#39;popup_search Box&#39.style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />

</form>

</div>

<div id="popup_searchBox" style="display:none;">

<div id="popup_searchBox_Data">

<!-- Search Box -->

<div class="search-form-wrapper" style="display: block;">

<div class="search-form-overlay"></div>

<form action="/search" class="search-form" method="get">

<label class="search-form-label">Type something and Enter <button onclick="document.getElementById('popup_searchBox' ).style.display = 'none';">Close</button></label>

<input class="search-text" name="q" type="text" value="">

<button class="hide search-submit" style="display:none;" type="submit"><trans>Search</trans></button>

</form>

</div>

<!-- Search Box -->

</div></div>
منبع:سروش پرداز|طراحی سایت

- - , .
.