HTML, CSS ve JavaScript ile Gizli Arama Çubuğu Oluşturun

Etkileşimli GUI öğeleri, uygulamanızın kullanımını kolaylaştırır. HTML, varsayılan olarak birkaç form bileşeni içerir, ancak tasarımınıza uyması için CSS kullanmak isteyeceksiniz. Davranışlarını genişletmek veya değiştirmek için JavaScript'i de kullanabilirsiniz.

Bu tür bileşenleri Tailwind gibi bir kitaplık kullanarak oluşturabilirsiniz, ancak bunları sıfırdan nasıl oluşturacağınızı bilmek de yararlıdır.

HTML, CSS ve JavaScript kullanarak nasıl gizli bir arama çubuğu oluşturacağınızı öğrenin.

HTML ile İçerik Yapısını Oluşturun

İşte özelliğin HTML kodu. Bir girdi ve bir düğme öğesi içeren bir üst öğeniz olacaktır. Ayrıca, arama simgesi için harika yazı tipi betikleri de içe aktaracaksınız. Bu durumda, büyüteç arama simgesini kullanacaksınız.

html>
<htmldil="tr">
<KAFA>
<metakarakter kümesi="UTF-8" />
<metahttp eşdeğeri="X-UA Uyumlu"içerik="IE=kenar" />
<metaisim="görüntü alanı"içerik="genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" />





instagram viewer

<senaryokaynak=" https://kit.fontawesome.com/d69fb28507.js"çapraz köken="anonim">senaryo>
<başlık>Gizli Arama Çubuğubaşlık>
KAFA>

<vücut>
<divsınıf="ebeveyn">
<girişsınıf="giriş"tip="tip"Yer tutucu="Aramak..." />
<düğmesınıf="btn">
<Bensınıf="fa-katı fa-büyüteç">Ben>
düğme>
div>
vücut>
html>

Arayüzü CSS Kullanarak Stillendirin

CSS dosyasında, ana öğeye göreli konumunu vermeniz gerekir. Göreceli bir konum, giriş ve düğme öğelerinin üst öğe etrafında hareket etmesine olanak tanır. bu CSS konum özelliği çeşitli düzen türlerini kontrol eder, bu nedenle anlaşılması önemlidir.

Daha iyi görünürlük için her iki öğeyi de merkezde hizalayacaksınız. Ancak uygulamanızda, istediğiniz zaman arama çubuğuna sahip olmayı seçebilirsiniz. Ayrıca, her iki öğeye de aynı genişliği verin, böylece aynı boyutta görünsünler ve biri diğerinden daha büyük olmasın.

Ardından, ebeveyne hem giriş hem de düğme öğeleri için aktif bir sınıf vermelisiniz. Bu şekilde, öğe hareket ettiğinde belirtildiği gibi dönüşecektir.

* {
marj: 0;
dolgu malzemesi: 0;
kutu boyutlandırma: sınır kutusu;
}
vücut {
arka plan rengi: #d9d9d9;
yükseklik: 100vh;
görüntülemek: esnek;
hizalama öğeleri: merkez;
haklı içerik: merkez;
}
.ebeveyn {
konum: akraba;
}
.giriş {
anahat: hiçbiri;
sınır: hiçbiri;
sınır yarıçapı: 100piksel;
dolgu malzemesi: 5piksel 10piksel;
Genişlik: 40piksel;
geçiş: Genişlik 0.3 saniyekolaylaştırmak;
}
.giriş::Yer tutucu {
renk: yeşil;
}
.ebeveyn.aktif.giriş {
Genişlik: 200piksel;
}
.btn {
Genişlik: 40piksel;
dolgu malzemesi: 5piksel 10piksel;
imleç: Işaretçi;
sınır yarıçapı: 100piksel;
sınır: hiçbiri;
arka plan: yeşil;
görüntülemek: Çizgide;
kutu gölgesi: 0 0 5pikselrgba(0, 0, 0, 0.2);
konum: mutlak;
tepe: 0;
sol: 0;
geçiş: dönüştürmek 0.3 saniyekolaylaştırmak;
}
.ebeveyn.aktif.btn {
dönüştürmek: çeviriX(210piksel);
}
.fa-katı {
renk: #ffffff;
}

Şuna benzeyen bir arama düğmeniz olmalıdır:

JavaScript İşlevselliği Ekle

Ardından, öğeler için JavaScript kodu yazın. İlk olarak, JavaScript'i kullanarak ebeveyn, giriş ve düğme öğelerini seçin sorguSelector() yöntem.

Ardından, düğmeye bir tıklama olayı dinleyicisi ekleyin. Bu nedenle, tıklandığında, düğme seçilen sınıfa göre değişir. Ekle odak() belirtilen öğeye odaklanma yöntemi. Arama çubuğu genişlediğinde yanıp sönmeye başlar.

izin vermek giriş = belge.querySelector(".giriş");
izin vermek btn = belge.querySelector(".btn");
izin vermek ebeveyn = belge.querySelector(".ebeveyn");
btn.addEventListener("tıklamak", () => {
 ebeveyn.sınıfList.toggle("aktif");
 girdi.odak();
});

Düğmeye tıklarsanız, arama çubuğunu açar ve bunun tersi de geçerlidir. Aşağıdaki şemada gösterildiği gibi görünür:

Şimdi, bilgileri yazarsanız ve düğmeyi tıklarsanız, sistem bilgileri ararken kapanır.

Harika, değil mi? Bu kodu görebilir ve arama çubuğuyla oynayabilirsiniz. codepen.io oluşturarak arama çubuğunu daha da özelleştirebilirsiniz. arama çubuğu listesi öğelerin sayısı. Bu, kullanıcılarınızın uygulamada arama yapmasını kolaylaştırır.

Oluşturabileceğiniz Diğer Özellikler

Web geliştirmeye yeni başlayan biri olarak HTML, CSS ve JavaScript ile oluşturabileceğiniz birçok özellik vardır. Açılır/kalıcı bir pencere, bir görüntü kaydırıcı, bir Altbilgi otomatik güncelleyici ve daha pek çok şey oluşturabilirsiniz.

Bu tür yaratıcı projeler, programlama kavramlarını öğrenmek için harikadır. Becerileri öğrendikçe uygularsınız, bu da becerinin yararlılığını artırır. Ayrıca, sizin ve kullanıcılarınızın keyif alacağı harika kullanıcı arayüzleri oluşturabilirsiniz. Siteniz için gizli bir arama çubuğu ve diğer etkileşimli özellikler oluşturmak için bu kılavuzu kullanın.