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.

Comments

  1. User Avatar
    waydechism5

    When i use the jquery function anf refresh the page my <a href="#" rel="nofollow">✕</a> gets a style=”display: none;” and the x disappears.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag