Hidden Search Örneği

Bu yazımızda, HTML, CSS ve JavaScript kullanarak hidden search örneği oluşturacağız. Bu örnek ile şu konuları pekiştireceğiz:

☑️ HTML
- HTML dosyası, temel sayfa yapısını oluşturur.
- Sayfanın başında meta etiketleri ve harici CSS ve JS dosyalarını içeren bağlantılar bulunur. Ayrıca, Font Awesome kütüphanesinin bir CDN bağlantısı mevcuttur.
- Gövde kısmında, arama kutusu ve arama butonu için iki bileşen içeren “search” adlı bir div bulunur.
- Arama kutusu ve butonu için input ve button HTML elemanları kullanılır.
☑️ CSS
- CSS dosyası, sayfadaki öğelerin stilini belirler.
- İlk olarak, bir Google fontu olan “Roboto” yazı tipi dahil edilir ve sayfanın genel stilinde kullanılır.
- Sayfanın arka planı, iki renk arasında geçiş yapan bir doğrusal gradyan olarak ayarlanır.
- Arama kutusunun ve butonunun genel stilleri ve animasyonları tanımlanır. Aktif ve pasif durumları arasında geçiş yaparken, arama kutusunun genişliği ve düğmenin konumu değiştirilir.
☑️ JavaScript
- JavaScript, kullanıcının arama butonuna tıklamasına tepki olarak, arama kutusunu gizli durumdan görünür hale getirir.
- Arama ve butonu için DOM elemanlarını seçer ve bir “click” olay dinleyicisi ekler.
- “click” olayı tetiklendiğinde, search div’ine “active” sınıfını ekleyerek veya çıkararak arama kutusunu ve butonunu animasyonla açar/kapatır.

Projemiz, çeşitli sitelerde görebileceğiniz bir arama butonu içeren web sayfası tasarlamayı içermektedir. Projenin işleyişini CodePen üzerinden inceleyebilirsiniz:

See the Pen Hidden Search by 1kodum (@1kodum) on CodePen.

⭐ HTML kodu

<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Hidden Search</title>
</head>
<body>
<div class="search">
<input type="text" class="input" placeholder="Search...">
<button class="btn">
<i class="fas fa-search"></i>
</button>
</div>
<script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Hidden Search</title>

</head>

<body>

</button>

</div>

</body>

</html>

⭐ CSS kodu

Aşağıdaki CSS kodu, gizli arama kutusu ve butonu olan bir web sayfasının görünümünü ve animasyonlarını düzenler. Kodun temel bileşenlerini şu şekilde özetleyebiliriz:

Bu CSS kodu, gizli arama kutusu ve butonu olan bir web sayfasının görünümünü ve animasyonlarını düzenler. Kodun temel bileşenlerini şu şekilde özetleyebiliriz:
“Roboto” yazı tipini Google Fonts’tan içe aktarır ve tüm sayfadaki yazı stilleri için kullanır.
Tüm HTML elemanlarının kutu modelini “border-box” olarak ayarlar, böylece padding ve border, elemanın genişliğine ve yüksekliğine dahil edilir.
Sayfa arka planını, iki renk arasında geçiş yapan doğrusal bir gradyan olarak ayarlar.
Sayfanın içeriğini merkezde hizalar ve sayfanın yüksekliğini tarayıcı penceresinin yüksekliğine eşitler.
Arama kutusunun ve butonunun temel stillerini ve animasyonlarını tanımlar:
- Arama kutusu başlangıçta kısa ve kare şeklindedir.
- Arama düğmesi, arama kutusunun sol üst köşesinde yer alır.
- Arama kutusunun ve düğmesinin odak stili (tarayıcının varsayılan dış çizgisi) kaldırılır.
Arama kutusu ve butonu aktif hale geldiğinde (yani, kullanıcı butona tıkladığında), animasyonlar devreye girer:
- Arama kutusu genişler ve kullanıcıya metin girişi için alan sunar.
- Arama butonu, genişleyen arama kutusunun yanına geçer.

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
}
body {
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
font-family: "Roboto", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.search {
position: relative;
height: 50px;
}
.search .input {
background-color: #fff;
border: 0;
font-size: 18px;
padding: 15px;
height: 50px;
width: 50px;
transition: width 0.3s ease;
}
.btn {
background-color: #fff;
border: 0;
cursor: pointer;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
transition: transform 0.3s ease;
}
.btn:focus,
.input:focus {
outline: none;
}
.search.active .input {
width: 200px;
}
.search.active .btn {
transform: translateX(198px);
}

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {

box-sizing: border-box;

}

body {

background-image: linear-gradient(90deg, #7d5fff, #7158e2);

font-family: "Roboto", sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.search {

position: relative;

height: 50px;

}

.search .input {

background-color: #fff;

border: 0;

font-size: 18px;

padding: 15px;

height: 50px;

width: 50px;

transition: width 0.3s ease;

}

.btn {

background-color: #fff;

border: 0;

cursor: pointer;

font-size: 24px;

position: absolute;

top: 0;

left: 0;

height: 50px;

width: 50px;

transition: transform 0.3s ease;

}

.btn:focus,

.input:focus {

outline: none;

}

.search.active .input {

width: 200px;

}

.search.active .btn {

transform: translateX(198px);

}

⭐ JavaScript kodu

Aşağıdaki JavaScript kodu, arama kutusu ve düğmesinin animasyonları için etkileşim sağlar. Kısaca aşağıdaki işlemleri gerçekleştirir:

.search, .btn ve .input sınıfına sahip DOM elemanlarını (sırasıyla arama kutusu ve düğmesini içeren div, arama düğmesi ve arama kutusu) seçer ve ilgili değişkenlere atar.
Arama düğmesine (btn) tıklama olayını dinler ve bu olay gerçekleştiğinde bir fonksiyon çalıştırır.
Bu fonksiyonda:
- Arama kutusu ve düğmesini içeren div’e (search) “active” sınıfını ekler veya çıkarır. Bu, CSS’te tanımlanan animasyonların tetiklenmesini sağlar (arama kutusunun genişlemesi ve düğmenin kayması).
- Arama kutusuna (input) odaklanır. Bu sayede, kullanıcı düğmeye tıkladığında, arama kutusuna metin girmeye başlayabilir.

const search = document.querySelector(".search");
const btn = document.querySelector(".btn");
const input = document.querySelector(".input");
btn.addEventListener("click", () => {
search.classList.toggle("active");
input.focus();
})

const search = document.querySelector(".search");

const btn = document.querySelector(".btn");

const input = document.querySelector(".input");

btn.addEventListener("click", () => {

search.classList.toggle("active");

input.focus();

})

İlgili Makaleler

Copy Text to Clipboard Örneği

Expanding Cards Örneği

JavaScript ile Dijital Saat Örneği

Progress Steps Örneği

Bir yanıt yazın Yanıtı iptal et