Search-dropdown Hybrid Box

Here’s an interesting interface element: a search and a drop-down menu in one. Search boxes now use dropdowns for live results and suggested searches but here it’s used as a basic navigation menu, combined with an ability to just type and search for what you want.

This is from Giraffe Restaurants website by Engage Interactive. Here’s what the box looks like when hovered over:

<img class=”alignnone” title=”Giraffe hover” src=”/images/0911/giraffe_hover.png” alt="” width=”530” height=”254” />

And clicked:

<img class=”alignnone” title=”Giraffe clicked” src=”/images/0911/giraffe_click.png” alt="” width=”530” height=”336” />

Additionally, it shows nearest locations to whatever result you choose or search for underneath:

<img class=”alignnone” title=”Giraffe suggestions” src=”/images/0911/giraffe_suggestions.png” alt="” width=”530” height=”254” />

Great way to keep the interface simple and helpful.