ساخت دکمه جستجو توسط css و html

[سعید شعبانی 2047]

دوستان سلام

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

طریقه عملکرد دکمه به اینصورت باشه که در ابتدا کلمه جستجو دیده شود و با کلیک کردن روی دکمه جستجو فرم جستجو باز شود و بتوان با آن کار کرد و با کلیک دوباره روی کلمه جستجو یا جایی خارج از فرم جستجو, فرم جستجو محو و کلمه جستجو نشان داده شود.

تاحدی پیش رفتم ولی درست کار نمی کند. لطفا راهنمایی کنید

http://jsbin.com/ajacor/1

[kasra 4929]

سلام

اینو دانلود کن 3 نمونه خیلی خوشگل داره همینی که میخوای هست ببین به کارت میاد یا نه :

Demo.zip

[imanfakhar 26231]

http://jsbin.com/ajacor/2/

[سعید شعبانی 2047]

سلام

اینو دانلود کن 3 نمونه خیلی خوشگل داره همینی که میخوای هست ببین به کارت میاد یا نه :

Demo.zip

میشه یک نمونه را بدید که از جی کئوری استفاه نکرده باشه

[سعید شعبانی 2047]

http://jsbin.com/ajacor/2/

کد جاوا این را میشه داخل یک فایل که از قبل برای تب ها هست گذاشت؟

[Parsa 23463]

کد جاوا این را میشه داخل یک فایل که از قبل برای تب ها هست گذاشت؟

بله مشکلی ندارد

[mehral 785]

این یه نمونه است که یه طرفه ولی بدون جی کوئری

http://jsbin.com/exirog/1

[imanfakhar 26231]

این یه نمونه است که یه طرفه ولی بدون جی کوئری

http://jsbin.com/exirog/1

iهمین کد برای هر دو حالت باز و بسته (بدون js)

http://jsbin.com/exirog/3/

کد جاوا این را میشه داخل یک فایل که از قبل برای تب ها هست گذاشت؟

کد را در هر فایل js بگذارید فرقی ندارد و به کد فراخوانیش دقت کنید

showhidden('searchform')

به جای searchform می توانید id باکس های دیگر را بگذارید و در واقع با همین کد هر تعداد که خواستید جعبه مخفی شونده (یا هر اسمی که بشه روش گذاشت) بسازید، همینطور منوهای درختی

[shayan 116]

سلام

دوستان من یه همچین فرمی برای search دارم

			  <form class="navbar-form navbar-left" role="search">
			    <div class="form-group">
				  <input type="text" class="form-control serarch-btn" placeholder="جستجو کنید ..." name="search">
			    </div>
			    <button type="submit" class="serarch-su" name="search-su" value=""></button>
			  </form>

که خروجیش این میشه

در حالت عادی فیلد متن جستجو پنهان هست

میخوام وقتی روی input سرچ کلیک شد فیلد متن جستجو نمایش داده بشه

و وقتی هم که برای بار دوم کلیک شد جستجو انجام بشه

پیشاپیش ممنون از کمکتون

[shayan 116]

UP