I've been working on this prototype for mobile menus. Here's the workflow that I came up with so far. The main features that I've been trying to hit are:
a) It's responsive
b) It handles sub navigation
c) It's intuitive
d) It takes advantage of gestures
e) It doesn't take up too much vertical space
So let me go through each step (click attachment to see all the steps):
1) This would be the default state. You would still have all the top level navigation available to you and you could swipe left and right to see them. The home icon replaces a "home" text link and is optional. But clicking the "list" icon drops down the navigation to be more mobile navigable—see 4 and 5.
2) Shadows on the left and right appear when there is content scrollable there.
3) The search field overlays the top row of whatever state the navigation is on when clicked. Clicking the "X" cancels the search.
4) This is the root pages view. It has the menu title, the "x" which returns you to the horizontal state (see 1) and the search button. Clicking on the links takes you to the respective pages but if you click an arrow the navigation slides to the left and that pages sub navigation slides in—see 5.
5) This would be the sub navigation view. You can click on the chevron pointing left to return to the parent list. The "menu" title is now replaced with the parent list item and is clickable to go to that page. The rest is identical to step 4.
I'd love to get some input on what everyone thinks. I wasn't able to find a plugin that does this sort of thing so I'm currently working on a jQuery plugin that handles the different states along with corresponding base CSS.
11 months ago
This is nice, @Sebastian Nitu. Question on 1)... If the list icon drops down a more navigable option, why even include the swipe version of the nav?
@Rob Alan Well, my thinking was that it ties the desktop version of the nav nicely with the mobile and keeps the root pages accessible without having to click anything. I guess an alternate version would work with just the list icon and search.
I'm not totally settled yet though. Maybe the root nav with swipe doesn't add much value.
@Sebastian Nitu Sure, makes sense but that was my thought re: value—but that's not to say that it's not an interesting idea or that it wouldn't be sexy. :)
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.