Knop met uitklappend zoekveld
Hieronder zie je een ronde knop met een zoek-symbool. Als de muis er over gaat of als je er op klikt of tikt verschijnt
er een invoerveld waar je een zoekterm kunt ingeven.
Als het invoerveld de focus verliest, verdwijnt het weer, maar wat je hebt ingetypt blijft wel behouden.
Het "zoekveld" doet overigens niets.
Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code staat onderaan deze bladzijde. Die kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- De werking van het script.
- Inbouwen in je eigen site.
- Inspiratie voor dit item is ontstaan door diverse websites op internet, die dit hebben. Voor deze site heb ik iets nagebouwd wat er op lijkt.
- De code bestaat uit HTML en CSS (in de file styles.css). JavaScript wordt in het voorbeeld niet gebruikt, maar
is nodig als je het zoekveld aan een actie wilt koppelen.
- De werking van het script
- Als de muis boven de knop zweeft of als er op wordt getikt of geklikt wordt door CSS (:hover) het invoerveld zichtbaar gemaakt. Dit betekent dat het invoerveld weer verdwijnt als dat de focus verliest.
- Als het invoerveld de focus heeft, kan er data worden ingevoerd.
- Er zijn nog geen voorzieningen getroffen om de data uit het invoerveld te lezen en te verwerken.
- HTML
- De HTML bestaat uit twee geneste <div>-tags met klassen zoek-container (de buitenste) resp. zoek-veld (de binnenste).
- zoek-container bepaalt de afmetingen en de plaats in het document.
- zoek-veld bevat de knop en het invoerveld. De knop is gepositioneerd en opgemaakt met CSS. Het invoerveld is even breed als zoek-container en is transparant gemaakt met CSS.
- Het vergrootglas op de knop is Unicode-karakter nr. 128269 (decimaal; x1f50d hexadecimaal).
- CSS
- De klasse zoek-container bepaalt de afmetingen van het uitgeklapte zoekveld en positioneert het geheel in de regel.
- De klasse zoek-veld houdt de knop en het invoerveld bij elkaar.
- Binnen zoek-veld worden de knop en het invoerveld apart opgemaakt.
- De input binnen zoek-veld is 250px breed en 18px hoog. Het veld is onzichtbaar (transparant) doordat opacity op 0 staat. De rand heeft een afrondingsstraal van 20px.
- De button binnen zoek-veld is een cirkel met een grijze achtergrond en een diameter van 30px. Deze is aan
de rechterkant gepositioneerd, op de halve hoogte van zoek-veld. Dit is gedaan met right en transform:translateY().
Om het vergrootglas goed op zijn plaats te krijgen zijn display, justify-content en align-items gebruikt.
- De pseudoklasse :hover reageert op de muis. Als de muis over de klasse zoek-veld gaat, wordt de breedte
ingesteld op 250 px. Als de muis over het invoerveld gaat, wordt die zichtbaar gemaakt door opacity op 1 te zetten.
Als de muis over de knop gaat, draait het vergrootglas over 360°.
Alle animaties duren 0,3 sec. met ease.
- Inbouwen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
- Verander eventueel de hoogte en de breedte van uit (uitgeklapte) zoekveld in zoek-container. Als je de hoogte aanpast moet je ook de positie (right) in zoek-veld button meenemen.
- Pas de positionering van zoek-container aan naar de opmaak van je document. Verander kleuren, lettertype, enz.
naar je eigen smaak.
- Tenslotte...
- Als je het zoekveld wilt koppelen aan een actie, geef je het zoekveld een id en maak je een function die wordt gestart via onclick() of een EventListener.
- Gebleken is dat het niet mogelijk is om data in te voeren bij Chromium-browsers (Chrome, Edge), bij gebruik van een Android-apparaat met aanraakscherm waar ook een muis aan is gekoppeld. De oorzaak is (nog) niet gevonden.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
(Zet dit in de <BODY> op de plaats waar de knop en het zoekveld moeten verschijnen)
<div class="zoek-container">
<div class="zoek-veld">
<input type="text" placeholder="Zoeken…">
<button type="button">🔍</button>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb787.zip, 806 bytes.
