یک نوار جستجوی پنهان با HTML، CSS و جاوا اسکریپت ایجاد کنید

بیاموزید که چگونه با استفاده از HTML ساده، CSS و جاوا اسکریپت یک نوار جستجو در حال گسترش ایجاد کنید.

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

شما می توانید چنین کامپوننت هایی را با استفاده از کتابخانه ای مانند Tailwind ایجاد کنید، اما دانستن چگونگی ایجاد آنها از ابتدا نیز مفید است.

نحوه ایجاد یک نوار جستجوی پنهان با استفاده از HTML، CSS و جاوا اسکریپت را بیاموزید.

ساختار محتوا را با HTML ایجاد کنید

در اینجا کد HTML این ویژگی است. شما یک عنصر والد خواهید داشت که شامل یک ورودی و یک عنصر دکمه است. شما همچنین اسکریپت های فونت عالی را برای نماد جستجو وارد خواهید کرد. در این حالت از نماد جستجوی ذره بین استفاده خواهید کرد.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/d69fb28507.js" crossorigin="anonymous"></script>
    <title>Hidden Search Bar</title>
</head>

<body>
    <div class="parent">
        <input class="input" type="type" placeholder="Search..." />

        <button class="btn">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
    </div>
</body>

</html>

رابط را با استفاده از CSS سبک کنید

در فایل CSS، باید به عنصر والد موقعیت نسبی بدهید. یک موقعیت نسبی به عناصر ورودی و دکمه اجازه می دهد تا در اطراف والد حرکت کنند. ویژگی موقعیت CSS چندین نوع طرح بندی را کنترل می کند، بنابراین درک آن بسیار مهم است.

مطلب مرتبط: نحوه مدیریت خطاها در Redux-Saga با استفاده از بلوک های try…catch

همچنین برای دید بهتر، هر دو عنصر را در مرکز تراز می‌کنید. اما در برنامه خود، می توانید انتخاب کنید که نوار جستجو هر زمان که بخواهید داشته باشید. همچنین، به هر دو عنصر عرض یکسان بدهید تا یک اندازه به نظر برسند و یکی بزرگتر از دیگری نباشد.

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #d9d9d9;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parent {
    position: relative;
}

.input {
    outline: none;
    border: none;
    border-radius: 100px;
    padding: 5px 10px;
    width: 40px;
    transition: width 0.3s ease;
}

.input::placeholder {
    color: green;
}

.parent.active .input {
    width: 200px;
}

.btn {
    width: 40px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 100px;
    border: none;
    background: green;
    display: inline;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.3s ease;
}

.parent.active .btn {
    transform: translateX(210px);
}

.fa-solid {
    color: #ffffff;
}

شما باید یک دکمه جستجو به شکل زیر داشته باشید:

قابلیت جاوا اسکریپت را اضافه کنید

سپس کد جاوا اسکریپت را برای عناصر بنویسید. ابتدا عناصر والد، ورودی و دکمه را با استفاده از متد () querySelector جاوا اسکریپت انتخاب کنید.

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

let input = document.querySelector(".input");
let btn = document.querySelector(".btn");
let parent = document.querySelector(".parent");

btn.addEventListener("click", () => {
    parent.classList.toggle("active");
    input.focus();
});

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

مطلب مرتبط: الگوی طراحی Singleton چیست؟

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

جالب است، اینطور نیست؟ می توانید این کد را ببینید و با نوار جستجو در codepen.io بازی کنید. می‌توانید با ایجاد فهرستی از موارد نوار جستجو، نوار جستجو را بیشتر سفارشی کنید. این کار باعث می‌شود تا کاربران شما بتوانند در اپلیکیشن جستجو کنند.

ویژگی های دیگری که می توانید ایجاد کنید

به عنوان یک مبتدی در توسعه وب، ویژگی های زیادی وجود دارد که می توانید با HTML، CSS و جاوا اسکریپت ایجاد کنید. می توانید یک پنجره بازشو/مدال، یک نوار لغزنده تصویر، یک به روز رسانی خودکار پاورقی و بسیاری موارد دیگر ایجاد کنید.

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