Crea una barra di ricerca nascosta con HTML, CSS e JavaScript

Gli elementi GUI interattivi rendono la tua applicazione più facile da usare. L'HTML include diversi componenti del modulo per impostazione predefinita, ma ti consigliamo di utilizzare i CSS in modo che si adattino al tuo design. Puoi anche utilizzare JavaScript per estendere o modificare il loro comportamento.

Puoi creare tali componenti utilizzando una libreria come Tailwind, ma è utile anche sapere come crearli da zero.

Scopri come creare una barra di ricerca nascosta utilizzando HTML, CSS e JavaScript.

Crea la struttura del contenuto con HTML

Ecco il codice HTML per la funzione. Avrai un elemento genitore che contiene un input e un elemento pulsante. Importerai anche script fantastici per i caratteri per l'icona di ricerca. In questo caso, utilizzerai l'icona di ricerca della lente di ingrandimento.

html>
<htmllang="it">
<Testa>
<metaset di caratteri="UTF-8" />
<metahttp-equiv="Compatibile con X-UA"contenuto="IE=bordo" />





instagram viewer

<metanome="finestra"contenuto="larghezza=larghezza-dispositivo, scala-iniziale=1.0" />
<copionesrc=" https://kit.fontawesome.com/d69fb28507.js"origine incrociata="anonimo">copione>
<titolo>Barra di ricerca nascostatitolo>
Testa>

<corpo>
<divclasse="genitore">
<ingressoclasse="ingresso"tipo="tipo"segnaposto="Ricerca..." />
<pulsanteclasse="btn">
<ioclasse="fa-solido fa-lente d'ingrandimento">io>
pulsante>
div>
corpo>
html>

Modella l'interfaccia usando i CSS

Nel file CSS, devi dare all'elemento genitore la posizione di relative. Una posizione relativa consente agli elementi input e button di spostarsi attorno al genitore. IL Proprietà posizione CSS controlla diversi tipi di layout, quindi è importante da capire.

Allineerai anche entrambi gli elementi al centro per una migliore visibilità. Ma sulla tua applicazione, puoi scegliere di avere la barra di ricerca quando vuoi. Inoltre, dai a entrambi gli elementi la stessa larghezza in modo che sembrino della stessa dimensione e non uno più grande dell'altro.

Quindi devi dare al genitore una classe attiva sia per l'input che per il pulsante. In questo modo, si trasformerà come specificato ogni volta che l'elemento si sposta.

* {
margine: 0;
imbottitura: 0;
dimensionamento della scatola: scatola di confine;
}
corpo {
colore di sfondo: #d9d9d9;
altezza: 100vh;
Schermo: flettere;
align-elementi: centro;
giustificare il contenuto: centro;
}
.genitore {
posizione: parente;
}
.ingresso {
contorno: nessuno;
confine: nessuno;
bordo-raggio: 100px;
imbottitura: 5px 10px;
larghezza: 40px;
transizione: larghezza 0.3ssollievo;
}
.ingresso::segnaposto {
colore: verde;
}
.genitore.attivo.ingresso {
larghezza: 200px;
}
.btn {
larghezza: 40px;
imbottitura: 5px 10px;
cursore: puntatore;
bordo-raggio: 100px;
confine: nessuno;
sfondo: verde;
Schermo: in linea;
scatola-ombra: 0 0 5pxrgb(0, 0, 0, 0.2);
posizione: assoluto;
superiore: 0;
Sinistra: 0;
transizione: trasformare 0.3ssollievo;
}
.genitore.attivo.btn {
trasformare: tradurreX(210px);
}
.fa-solido {
colore: #ffffff;
}

Dovresti avere un pulsante di ricerca simile a questo:

Aggiungi funzionalità JavaScript

Quindi, scrivi il codice JavaScript per gli elementi. Innanzitutto, seleziona gli elementi padre, input e button utilizzando JavaScript querySelector() metodo.

Quindi, aggiungi un listener di eventi clic al pulsante. Quindi, quando si fa clic, il pulsante cambia in base alla classe selezionata. Aggiungi il messa a fuoco() metodo per impostare lo stato attivo sull'elemento specificato. Inizia a lampeggiare ogni volta che la barra di ricerca si espande.

permettere ingresso = documento.querySelector(".ingresso");
permettere bn = documento.querySelector(".btn");
permettere genitore = documento.querySelector(".genitore");
btn.addEventListener("clic", () => {
 parent.classList.toggle("attivo");
 input.focus();
});

Se fai clic sul pulsante, si apre la barra di ricerca e viceversa. Appare come mostrato nel diagramma seguente:

Ora, se digiti le informazioni e fai clic sul pulsante, si chiude mentre il sistema cerca le informazioni.

Fantastico, non è vero? Puoi vedere questo codice e giocare con la barra di ricerca attiva codepen.io. Puoi personalizzare ulteriormente la barra di ricerca creando un file elenco della barra di ricerca di articoli. Ciò rende più facile per i tuoi utenti effettuare ricerche sull'app.

Altre funzionalità che puoi creare

Come principiante nello sviluppo web, ci sono molte funzionalità che puoi creare con HTML, CSS e JavaScript. Puoi creare una finestra popup/modale, un dispositivo di scorrimento dell'immagine, un aggiornamento automatico del piè di pagina e molti altri.

Tali progetti creativi sono ottimi per l'apprendimento dei concetti di programmazione. Puoi applicare le abilità man mano che le impari, il che aumenta l'utilità dell'abilità. Inoltre, puoi creare fantastiche interfacce utente che piaceranno a te e ai tuoi utenti. Usa questa guida per creare una barra di ricerca nascosta e altre funzionalità interattive per il tuo sito.