I need to design a mega-dropdown navigation for an online store and I'm looking for some inspiration. Here is some information about the project.
The content is categorized at two levels. The main level is not problematic - it actually refers to big sections of the store, so the case is simple here.
Now, at the second level, there are at least three keys to categorize the content - let's call them like this:
- Topic (about 15 of them - quite fine for me)
- Type (just 7-8 of these, also fine)
- Category - and here is the trick - there are almost 40 (!) categories in just one (yet very important) of the level one sections (for the other ones they are significantly less numerous).
Besides, in the mega-dropdown, I need to provide also some space for promo content of the level one section.
The tricky part here is that the Category stuff cannot be put on another page and just linked from the dropdown - too many users rely this one, so it needs to be quite easily accessible. At the same time, it cannot be called the main and most important way users choose to navigate through the content - it's just inevitable, let's call it "a burden".
As I want to keep the whole mega dropdown above the fold and keep this pattern convergent with the tablet version (I believe it's possible in the mockups below, just maybe there are too small fonts in these :)), I have come up with an idea of double-state mega dropdown. I know it seems a bit kinky, but it allows me to hide this additional navigation while still keeping it accessible.
In the mockups below, the two states are presented one below another, and the gradiented switch gets activated on hover in desktop version and on tap in tablet version, so it forms some kind of accordion. I cannot place some tabs on the top of the dropdown, as these would need to be quite high (horizontal sub-nav disadvantage) and I cannot place them on the left/right side, as various top level sections are triggered by hovering over the buttons that are located from left to right above the mega dropdown.
Let me know what you think about this case. Any inspiration, even trashing this idea, would be appreciated.
Here is the image:
And here is a link to the .rp file if anyone would like to fiddle with it,