Search button - dropdown form

[h3aderon]

Removed search button, replaced with new search, and added CSS code to match top-header menu

[rgilman]

Alex, this is great progress!

... and now I'd like to to take it a next step. As I mentioned on the call, I'd like the search box and button to be the same height. I'd also like the search box and button to stay within the menu area. On our call, I was thinking of having the search box and button cover the top menu but it could also cover the submenu area, like this:

There may be a simple way to do this that doesn't require foundation – just CSS (like display:hidden except on hover over the search menu item icon).

@iangilman, how would you do this kind of conditional reveal of a text input area?

[iangilman]

Hmm... There are definitely some nuances to get right if you want to have it appear conditionally. I don't think you would be able to do it all with just CSS. You wouldn't have to use Foundation, of course... You could do it with vanilla JavaScript. I don't know what options Foundation might offer to help with this.

If I was doing it with vanilla JavaScript (or more likely, using jQuery to make it easier), I would indeed have the search area display: hidden by default, and then when you click on the search button it would remove or add a class to the search area to change its display property. Then you'd need to handle when to close it again: when the user hits the search button (or hits return), or when they hit escape (to cancel).

BTW, you'd want your search area to have position: absolute and some additional positioning properties so that it properly overlays the content it's supposed to cover up.

[rgilman]

It turns out that Foundation does allow quite a bit of control over positioning – see these plugin options, including data-v-offset, data-h-offset, data-position and data-alignment.

Since we would need JavaScript anyway (can't do it with pure CSS), I recommend we stick with Foundation for now.