Breadcrumb + Navigation

I was thinking to simplify UI of online shopping site like Amazon. I came up with an idea that I merge breadcrumb and navigation menu and created demo site to browse amazon.co.jp in simple UI.

• Demo: Tiny Shopping Browser

I reduced page elements as much as possible. The demo page just supports searching products and browsing nodes (categories.)

Features

• When you access the page, the first level category menu is expanded.
• When you also choose a category, child category menu is expanded.
• Expanded menu will be fade out unless mouseover the menu.
• When you input more than 3 characters, it searches products.
• When you choose a category, it searches products in the category if keywords are input.

Known issues

• A bit slow loading child category for the first request.
• Menu will be overrapped when you mouseover menues in short interval (fixed)

I haven’t checked with windows, so there might be some issues on windows environment.

Since I used data of amazon.co.jp, the node name and most products are written in Japanese.

I may fix the above and other issues, and may add some features in the future when I have time.