This is the last piece to go into the Interaction section of the portfolio. The GIF is quite large, over 4 megs, so do show some patience.
This is a variation of a stacked menu, whereby opened submenus are collected at the top and the active submenu of choices sits at the bottom. What makes this particular menu different is an ability to navigate to its every corner without needing to change current selection.
Second notable thing is the "currently selected" link at the top line that appears only when the user clicks away from the submenu containing the current selection. It may not look like much, but this ability to always "reset" the menu to its selection-centric state is what make this menu actually usable. It allows synch'ing up the menu with the page content when it's not immediately clear where the current page belongs in the menu.
In any case, here's the production version. Any thoughts or comments are welcome.
about 2 years ago
Would it make sense to indent the subcategories? as it is now, depending on screen size, this might be a bit confusing.
@Cory At the stacked part?
Its kinda unusual, but I like it. It works for me.
@Sven - being unusual is the whole point :)
Too many clicks for me...I would have lost interest. :(
@Brian - Ah, yes, excessive mouse wear and tear is definitely a concern :)
@Alex Pankratov It's very nice though, don't get me wrong. :)
@Alex Pankratov yes. when viewed on a phone (in landscape orientation) depending on how many levels down you are in the navigation, its kinda muddled even with the headers and the arrow (especially if you added more content to it).
On a desktop browser this doesn't really matter, but on mobile, once you zoom in to actually be able to (accurately) tap any links, I think its a different story.
I like this though, even if needs a few too many clicks as @Brian Plemons said. :)
@Cory - right, I see what you mean. I had no time yet to adjust the site for the mobile viewing. To be honest, I don't like the indenting idea, it solves the ambiguity (which is there) by adding visual complexity. The same can be done by simpler means.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.