#037: Building Search, Part 3

We have a little more work to do to finish up the search area.

We get sidetracked for just a second as I notice we didn’t add the three-dimensional stacking affect to the page wrap yet, so we do that and change the coloring.

Then we work on the “Search in:” area, which are the little links where you can click to narrow down search by what area of the site. Later on we’ll make that actually work, but we’ll get the UI for it set here. The links are a light blue, but the “selected” link turns white and gets underlined, which is plenty of feedback on which is selected.

We also add an ✕ character (that we snag from CopyPasteCharacter) as a little link you can click (or tap) to close the search area.

Once we have the design all set, we find that opening and closing the search area is a little awkward. Things temporarily wrap upon themselves when the open search area is temporarily narrow. To fix it, we make sure nothing wraps with white-space: nowrap; and ensure nothing sticks out weird with oveflow: hidden;.

I end it by saying we’ll make the search engines next, but we don’t actually get to it next, that’ll be coming up around Video #094.