Vollbild-Suchfenster ohne JavaScript (reines CSS)

Ich habe letztens auf einer Website eine clevere Variante einer Vollbild-Suchfunktion gesehen. Es gab einen Suchbutton, der auf einen Klick ein Overlay mit einer Suchbox aktivierte. Dazu wurde JavaScript (jQuery) genutzt.

Auch wenn ich die Idee und die optische Umsetzung ganz gut fand, war ich von der technischen Realisierung nicht besonders begeistert, obwohl grundsätzlich nicht mehr viel gegen JavaScript einzuwenden ist. Allerdings erfordert diese Art der Umsetzung das Einbinden und Laden bestimmter JavaScript Libraries und Plugins, die wiederum Einfluss auf Ladezeit und Performance haben.

Ich habe mich also mal an eine einfache Lösung gesetzt, die auf reinem CSS beruht. Dabei habe ich den :target „Hack“ genutzt. Ein Klick auf einen Anchor-Link „aktiviert“ dabei das Overlay. Der Browser springt auf einen bis dahin verborgenen Bereich der Website, der erst als aktives Ziel (:target-Selektor) sichtbar wird.

 

Ich habe dazu eine kleine Demo auf CodePen veröffentlicht:

https://codepen.io/pixelstunde/pen/QvMxVR

Den Code kann natürlich jeder frei und ohne Angabe einer Quelle nutzen (CC0-Lizenz).

Das JavaScript wurde nur eingebunden um verschiedene Animations-Arten zu demonstrieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.