آموزش ساخت سرچ بار در طراحی وب سایت

آموزش ساخت سرچ بار در طراحی وب سایت

در این مقاله می آموزید که چطور یک باکس جستجو در منوی navigation واکنش گرا ایجاد کنید.

ایجاد نوار جستجو در طراحی وب سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

<div class=&quottopnav&quot>
<a class=&quotactive&quot href=&quot#home&quot>Home</a>
<a href=&quot#about&quot>About</a>
<a href=&quot#contact&quot>Contact</a>
<input type=&quottext&quot placeholder=&quotSearch..&quot>
</div>

قدم دوم :برای ساخت نوار جستجو از کد CSS زیر استفاده کنید.

مثال ساخت نوار جستجو :

رای ساخت نوار جستجویی که دارای دکمه ارسال باشد از کد CSS زیر استفاده کنید.

مثال ساخت نوار جستجو همراه با دکمه ارسال :

نوار جستجو همراه با آیکون جستجو

قدم اول : کد HTML را اضافه کنید.
مثال :

برای ساخت نوار جستجویی که دارای آیکون جستجو باشد از کد CSS زیر استفاده کنید.

مثال ساخت نوار جستجو همراه با آیکون سرچ :

توجه :  : برای ایجاد نوارهایی که ریسپانسیو باشند و تجربه خوبی را برای کاربر ایجاد کنند، بخش ایجاد منو ریسپانسیو در طراحی وب سایت را نیز مطالعه کنید.

جهت مشاهده مثال های بالا برروی دوره آموزش طراحی سایت کلیک نمایید.