چطور یک سرچ باکس متحرک بسازیم؟

تا حالا با خودتون فکر کردین که این سرچ باکس‌های جینگول و متحرک را چطور می‌سازند؟ در نگاه اول ممکنه برنامه نویسی چنین سرچ باکسی، خفن و پیچیده به نظر به یاد اما از قرار معلوم کدش خیلی هم ساده ست. توی این پست با هم یاد می‌گیریم که با چند خط HTML، یک دش خوب CSS و دو فانکشن از جاوا اسکریپت این سرچ باکس متحرک باحال را بسازیم.

با HTML شروع می‌کنیم. وقتی دقیق به این مدل سرچ باکس‌ها نگاه کنید، متوجه میشید که آن‌قدرها هم پیچیده نیستند و فقط از یک ورودی برای سرچ و چند دکمه تشکیل شده‌اند.

<div class=&quotsearch-box&quot>

    <input type=&quottext&quot placeholder=&quotType to search...&quot/>

    <div class=&quotsearch-btn&quot>

      <i class=&quotfas fa-search&quot></i>

    </div>

    <div class=&quotcancel-btn&quot>

      <i class=&quotfas fa-times&quot></i>

    </div>

  </div>

در این کد HTML یک کلاس Container به اسم search-box وجود دارد که همه اجزای سرچ باکسمان رو کنار هم نگه می‌دارد. به این ترتیب می‌توانیم سرچ باکسمان رو خیلی راحت هرجای صفحه که می‌خواهیم قرار بدهیم.

یک search-btn هم داریم که آیکونی است که به عنوان دکمه سرچ از اون استفاده می‌کنیم و یک cancel-btnبرای وقتی که نیازی به این سرچ باکس نداریم و می‌خواهیم بسته باشد.

از تگ <button> استفاده نمی‌کنیم، چون ممکن است بخواهید از یک فریمورک فرانت‌اند مثل انگولار، ری اکت یا Vue استفاده کنید که در این حالت راحت‌تر می‌توانید سرچ باکس را به کمک جاوا اسکریپت هندل کنید.

کد را که اجرا کنید، به چنین چیزی بر می‌خورید:

حالا با CSS کمی به این سرچ باکس استایل می‌دهیم. انجام این قسمت اجباری نیست، چون فقط می‌خواهیم رنگ پس زمینه را تغییر بدهیم و همه چیز را در وسط صفحه قرار بدهیم.

html,body{

  display:grid;

  height:100%;

  place-items: center;

  background: #490910;

}

برای ادامه کار از ورودی سرچ باکس شروع می‌کنیم. اتفاقی که قرار است بیفتد این است که وقتی روی آیکون سرچ کلیک می‌کنیم، جاوا اسکریپت یک کلاس به اسم active را به کلاس search-box پیوست می‌کند تا بتوانیم عرض سرچ باکس را تعیین کنیم و انیمیشنی که باعث تحرک سرچ باکس می‌شود را به کار بیندازیم. همچنین می‌خواهیم وقتی سرچ باکس در حالت اکتیو قرار دارد، ورودی سرچ باکس نمایش داده شود. انیمیشن انتقال (Transition) را روی حالت cubic-beizer قرار می‌دهیم تا حس خوب و روانی به بیننده بدهد.

سپس با استفاده از width، height، border، background، font-size ،padding, and border-radiusظاهر اولیه سرچ باکس را طراحی می‌کنیم. opacityرا روی 0 قرار می‌دهیم. زیرا سرچ باکس تا زمانی که کلاس active فعال نشود، در حالت غیرفعال قرار دارد.

.search-box{

  position:relative;

  height:60px;

  width:0px;

  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55 );

}

.search-box.active{

  width: 350px;

}

.search-box.active input{

  opacity:1;

}

.search-box input{

  height:100%;

  width:100%;

  border:none;

  background:#fff;

  font-size:18px;

  border-radius: 50px;

  padding: 0 60px 0 20px;

  outline:none;

  opacity:0;

  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55 );

}

سرچ باکس در حالت اکتیو به این شکل خواهد بود:

حالا وقت این است که دکمه جستجو را کمی زیباتر و شکیل‌تر کنیم. برای این کار سلکتور search-btn را هدف قرار می‌دهیم. صفت‌هایheight و widthرا طوری تنظیم می‌کنیم که به دکمه یک حاشیه گرد و زیبا بدهد. سپس مکان نما (cursor) را به نشانه گر (pointer) تغییر می‌دهیم تا کاربر بفهمد که باید روی این دکمه کلیک کند.

همچنین با استفاده از position:absolute مکان دکمه را تغییر می‌دهیم تا در انتهای سرچ باکسمان قرار گیرد. چون قبلاً position:relative را در .search-box قرار داده‌ایم، این کار به سادگی صورت می‌گیرد.

از آنجایی که می‌خواهیم مطمئن شویم، دکمه سرچ ما همیشه قابلیت کلیک کردن را دارد، z-index را برابر 2 قرار می‌دهیم تا دکمه بالای همه چیزهای دیگر قرار گیرد.

همچنین رنگ دکمه جستجو را بسته به اینکه سرچ باکس ما تغییر حالت داده یا خیر تنظیم می‌کنیم. این کار را با استفاده از سلکتور کلاس active انجام می‌دهیم. بنابراین وقتی کلاسactive در حال اجراست، رنگ و پس زمینه آیکون سرچ تغییر می‌کند. توجه کنید که هر آیکونی شبیه به یک فونت است، بنابراین با این کار می‌توان رنگ آن را تغییر داد.

.search-box .search-btn{

  height:50px;

  width:50px;

  background: #fff;

  color:#664AFF;

  position: absolute;

  top:50%;

  right:-75px;

  transform: translateY(-50%);

  line-height:50px;

  text-align:center;

  border-radius:50%;

  font-size:20px;

  cursor:pointer;

  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55 );

  z-index:2;

}

.search-box.active .search-btn{

  height:50px;

  width:50px;

  background: #664AFF;

  color:#fff;

}

تا اینجا سرچ باکس ما با activeبه این شکل:

و بدون active به این شکل:

در می‌آید.

در آخرین مرحله از کارهای گرافیکی، بیایید دکمه cancel را استایل دهیم. همان کارهایی که برای دکمه سرچ انجام دادیم، برای دکمه کنسل هم انجام می‌دهیم، به‌جز قسمت color توجه داشته باشید که وقتی active در حال اجرا نیست، مقدارopacity صفر است. چون در این حالت احتیاجی به دکمه لغو نخواهیم داشت. دکمه کنسل فقط وقتی نمایش داده می‌شود که سرچ باکس ما در حالت اکتیو باشد.

.search-box .cancel-btn{

  position: absolute;

  color: #664AFF;

  top:50%;

  right: -75px;

  transform: translateY(-50%);

  color:#664AF;

  font-size:25px;

  cursor:pointer;

  height:50px;

  width:50px;

  line-height:50px;

  text-align:center;

  border-radius:50%

  opacity:0;

}

.search-box.active .cancel-btn{

  right: -135px;

  opacity:1;

  color:#fff;

  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55 );

}

در حالت active سرچ باکس ما به این شکل:

و بدون حالت active به این شکل:

در می آید.

حالا که ظاهر سرچ باکسمان را درست کردیم، وقت اضافه کردن جاوا اسکریپت به کدهایمان است.

سه المان هستند که مورد هدف ما می‌باشند: دکمه سرچ، دکمه کنسل و باکس جستجو. می‌خواهیم وقتی روی دکمه سرچ کلیک کردیم، یک کلاس به اسمactiveبه سرچ باکسمان اضافه شود و وقتی روی دکمه کنسل زدیم، activeاز سرچ باکسمان حذف شود.

برای این کار ازdocument.querySelector برای هدف گیری قسمت‌های مختلف سرچ باکس از طریق کلاس‌هایشان استفاده می‌کنیم. سپس از برای فعال کردن پیوستactive استفاده می‌کنیم. کد جاوا اسکریپت آن چیزی شبیه به این خواهد بود:

const searchBtn = document.querySelector(&quot.search-btn&quot);

const cancelBtn = document.querySelector(&quot.cancel-btn&quot);

const searchBox = document.querySelector(&quot.search-box&quot);

searchBtn. = () => {

  searchBox.classList.add(&quotactive&quot);

}

cancelBtn. = () => {

  searchBox.classList.remove(&quotactive&quot);

}

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

ما در پلازیکا عاشق یاد دادن و یاد گرفتنیم. بهمون بگید که چه زبان‌های برنامه نویسی ای را بلدید و چه زبان‌هایی هست که دوست دارید یاد بگیرید. ما همیشه از گپ زدن با شما لذت می‌بریم:)

راستی اگه به برنامه نویسی علاقه دارید اما هنوز نمیدونید که آیا یادگیری برنامه نویسی وب به دردتون میخوره یا نه، این پست رو به شما پیشنهاد میدیم: همه چیز درباره برنامه نویسی وب

پست قبلی پلازیکا در ویرگول: