Projects Hover
keyboard shortcuts: ← previous shot → next shot L or F like
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.
113,917,402,911 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
10 Responses
Realized that the secondary navigation wouldn't scale well in the previous iteration. So, I've broken it out from the original drop down and given it lots of room to grow.
about 1 year ago
Pro
David Yeiser
I like it. Is this for an iPad app? Or web app optimized for iPad?
about 1 year ago
Pro
Tom Creighton
Obviously seeing it sans-context makes it hard to tell, but I think the other version feels more connected.
about 1 year ago
@David Yeiser - It's for a web-app, though I do intend for it to work on the iPad as well.
What's important to realize are the invisible features: while the boxes appear a few pixels apart, moving the mouse between them will be flawless because their invisible edges will actually be right next to each other.
@Tom Creighton - I do agree with that thought, and it may turn out to be the enter solution. I do have two problems with it, however:
1. When any option but the first item in the first list is on :hover, the second list needs to start either with the top of the two lists aligned, or with the first item in the second list aligned with the top of the currently active item in the first list.
The first option feels awkward in that the blue arrow points to either the second, third, or fourth item in the second list. The section option, on the other hand, leaves a big black space above the second list.
2. Related to that last problem, if the second list is much longer than the first, there's a big black space under the first list.
This solution feels like the active item and the secondary list are more connected, even if they are a few pixels apart.
There must be other solutions out there, but these are the best I've come up with so far. I'm all ears if anyone has any other ideas!
about 1 year ago
Pro
Tom Creighton
@Pat Dryburgh Good points. Perhaps if the entire 'container' had a semi-transparent background, it wouldn't feel so monolithic when that box extended downward. There could also be a division within that containing element, where the arrow could be placed without being associated specifically with any of the sub-nav items.
about 1 year ago
I like it but have you tried to reduce the thickness of the dark border. I could image that it would look better
about 1 year ago
@Mladen - That's a pretty subjective opinion. "Look better" in what way? How does having a smaller border enhance the user experience? Given these drop-downs will appear over a lot of data, the borders help separate the content from the menus.
All of that said, the client doesn't love the iOS-ness of the menus. So, I'm not entirely sure what directly I'm going to take these next.
about 1 year ago
Rebound
Project Hover, Again
by Pat Dryburgh
Iterate, iterate, iterate.
about 1 year ago
Pro
John Ashenden
Love it. Of course!
Would like to see a version without the left arrow coming out of the child menu. My guts telling me that would look better and more "connected" in terms of a single drop out. Kinda like a good comprimise between what you had going on in the previous shot.
about 1 year ago
Thanks so much, @John Ashenden. Ended up taking this in an entirely different direction, as the client didn't like that the drop-downs looked like iOS drop-downs. I think your idea of dropping the arrow would be the smart way to go, though.
about 1 year ago