#037: Suchfunktion aufbauen, Teil 3

Wir haben noch etwas mehr Arbeit vor uns, um den Suchbereich fertigzustellen.

Wir werden kurz abgelenkt, als mir auffällt, dass wir dem Seiten-Wrap noch keinen dreidimensionalen Stapel-Effekt hinzugefügt haben. Also tun wir das und ändern die Farbgebung.

Dann arbeiten wir am Bereich "Suchen in:", das sind die kleinen Links, auf die man klicken kann, um die Suche auf bestimmte Bereiche der Website einzugrenzen. Später werden wir das auch tatsächlich funktionsfähig machen, aber wir richten hier die Benutzeroberfläche dafür ein. Die Links sind hellblau, aber der "ausgewählte" Link wird weiß und unterstrichen, was reichlich Feedback darüber gibt, welcher ausgewählt ist.

Wir fügen auch ein ✕-Zeichen hinzu (das wir von CopyPasteCharacter übernommen haben) als kleinen Link, auf den man klicken (oder tippen) kann, um den Suchbereich zu schließen.

Sobald wir das Design fertig haben, stellen wir fest, dass das Öffnen und Schließen des Suchbereichs etwas unhandlich ist. Die Elemente umschließen sich vorübergehend selbst, wenn der offene Suchbereich vorübergehend schmal ist. Um das zu beheben, stellen wir sicher, dass nichts umbricht mit white-space: nowrap; und stellen sicher, dass nichts komisch herausragt mit overflow: hidden;.

Ich beende es mit der Aussage, dass wir als nächstes die Suchmaschinen bauen werden, aber wir kommen nicht wirklich dazu, das kommt erst in Video #094.