Responsive Layout Nav
- Started
- Last post
- 9 Responses
- ETM
Hey all,
For those of you doing responsive design, I was curious how (methods, scripts etc.) you are scaling heavier drop down menus.
Most of the responsive sites I have done have had fairly light nav, usually one level. The current one I am working on is more content heavy, with 2/3 tier menus that need to be preserved.
Any resources and examples you are familiar with would great! Thanks.
- dbloc0
I hear flash is good at that
- http://sadtrombone.c…ETM
- Even better, new autoplay URL:
http://sadtrombone.c…ETM
- jaylarson0
Starbucks just kills theirs at the smaller size, given it's also not complex.
http://www.starbucks.com/
- ETM0
^
That's kinda terrible. Not everyone will know that 3 horizontal lines means 'touch here for menu'.
- i_monk0
^ Everyone using the Facebook app would know that. Which means everyone knows that.
- Really? Everyone, eh?ETM
- Have you met the average user? You don't work in UX at all, I assume. :)ETM
- http://www.youtube.c…moldero
- uan0
find best examples here:
http://mediaqueri.es/- Everyone one I have looked at so far, although nice, is single tier only.ETM
- nocomply0
I have my responsive nav menus set to a bulleted list that the user clicks to show/hide when the screen size drops below a certain width (usually around 600px).
Don't want to post links to my projects on here, but if you email me I'll send you some examples.
- ETM0
I thought we had numerous responsive design advocates and practitioners 'round here.
- tOki0
What you do is at your mobile breakpoint load in a different version of the navigation - for example one which follows a more app like approach where you have scrolling the tree structure that expands out from a button. Clicking an item either goes to a page, or slides in the from the right another list to allow you delve deeper.
The 3 line button is becoming quite ubiquitous, but for now I think the button should still say "navigation" or "menu"..
- tOki0
For your other sizes such as desktop, implement mega menus or tab systems..basically you want to use the space you have as efficiently as possible without hiding nor cramming. It's always a balance. It's really important to keep navigations relatively small in possible choices however - no more than around 5-8 per level/grouping.
Another solution might be to also take advantage of gestures via javascript? So that your responsive site can be swiped horizontally on touch devices to reveal a navigation at any point on the page - the problem with this is that some mobile browsers may override the javascript as a way of going between tabs. I haven't yet come across this - it may be because the javascript doesn't work particularly well..I'm no developer, just a UX/UI guy :)