When I started writing this I had not intended for it to go on so long, but I decided to keep it as is, since it contains stuff that might be useful to some Omega users and also asks for a broader debate about mobile navigation. So...
The last two sites that I have built using Omega have taken full advantage of the responsive grid and a mobile first approach. The exercise has pushed me explore new ways of doing things, such as building responsive slideshows and looking at different ways of displaying images. All good stuff.
The important topic of navigation has got me thinking about user friendly techniques for mobile menus.
I usually use the Menu Block module for navigation and on my first responsive site I created two menus; one for desktop with all the main menu links and a second menu for mobile, which just had the three most important sections together with a 'more' link leading to a simple sitemap page. I themed everything as a tab style menu and overall this approached work well, although from what I have read, some think it is a mistake to hide menu items from mobile users.
Having seen menu icons in use on the iPhone, as well as Facebook and Google + I was interested to know if I could achieve something similar for my second responsive site. By menu icon, I just mean a button, which opens a select list of menu items like a jump list - iPhone and Android present these as part of the OS and they are very user friendly. I can't do any php and I am only just getting my head around jQuery, so my thinking was find a module to that provided jump list functionality for Drupal menus and then see if I can customize its appearance with css.
The first module I found was Jump - http://drupal.org/project/jump . This will work, but it has a submit button which would have been messy and seems the maintainer is too busy to change the module in any way.
I then came across Quickmenu - http://drupal.org/project/quickmenu . This was written for D5 & D6 but a Drupal 7 port is available at http://drupal.org/node/1190002 . This menu automatically jumps on menu item select and was just what I was looking for.
I plugged Quickmenu into Omega and using the css display property got it show up for just mobile layout and decided to stay with Menu Block at the higher screen sizes. It all worked as intended and I was pleased with outcome.
On to the CSS. The first thing I tried was putting a button shaped background image behind the Quickmenu. This was okay, but still looked just like a select list and was not the icon style I was after. I should also say the default '-Select-' text was also displayed. It looked a bit crap really.
After a bit of head scratching, with css I added another background image (menu icon style) to the Quickmenu itself, matching the background color of the site and now it was starting to look more button like. Next to see I can get rid of the default 'Select' text. So I opened the module code, deleted the offending text and hoped it would work out - which it did. My first ever php hack - yikes!
So the end result is what you see in the attachment. It's still not perfect because the selected item text is exposed briefly when touched but I can live with this for the moment and hope that somebody will chip in with a proper way of doing all this.
The demo site can be seen here http://www.architectsleeds.com
Some background reading http://css-tricks.com/convert-menu-to-dropdown/
More generally, I'd be very interested to read about other ideas for mobile navigation.
| Attachment | Size |
|---|---|
| quickmenu.png | 174.03 KB |
Comments
Hi Paul, Fantastic! Super
Hi Paul,
Fantastic!
Super post, I was thinking the exact same thing the other day as I have a site to make which has waaaay too many menu items in the secondary nav to work well inline on a mobile. I was looking at how well popup links worked in google maps on the mobile and thought a similar thing would be great on a responsive website. I read that css tricks article a while back and it's a great insight into what is possible. I always thought a nice 100% width div (height at about 20px) at the very top of the mobile viewport with 'MENU' written on it is quite intuitive.
As you suggest, merely displaying the links on mobile without float:left is not enough if there are 6+ menu items, ends up messy.
I checked out your link, seems to work rather well! Nice one :)
Sam.
Hi Paul, I tried this module,
Hi Paul,
I tried this module, seemed to work ok but I had to select 'main menu' as the source for links.
I wanted to select 'main menu starting level 2' so quick menu would only show secondary links.
i.e. my page would have a simple text inline main menu with the quick menu underneath, which would only show IF their were child pages. The module could do with a 'starting depth' setting which I would set to 2.
Thinking about it though, I could in theory not show ANY menu on mobile and ONLY use quick menu, like you did. It would be ok but if there were a lot of menu items, the list would be huge!
Really need to find a decent navigation solution for mobile.
Maybe even quick tabs with secondary menus within them.
Sam.
Responsive navigation, accordion - dropdown
Hi sam, i did a short tutorial about a simple dropdown menu that turns into an accordion when you go to a mobile site.
So far this is implemented in 2 levels, but im sure it could be expanded further, and the same could be done with other menu modules like superfish or nicemenus.
http://ivanchaquea.com/creating-responsive-menu-omega-subthemes.html
i think its a great idea to
i think its a great idea to implement responsive menus for 4.x
Change hierarchy?
Ivan, this works great. I posted a comment on your blog but I will post here too.
Is there any way to have the hierarchy of the "expand" one level higher to save space? In other words, only show my "home" link that has an "expand" button on that and then once the expand is pressed (touched), then you see the other primary menu items and whatever second level items below those with their respective "expand" buttons. I think this would work well on phones for example so that the user sees more content and then he can choose to expand the main button.
High Rock Media | Drupal Photography | Skype: highrockmedia | Twitter
Hi Danny,thats a great idea,
Hi Danny,thats a great idea, it could be done, adding the expand button to the first li(home button) on the menu. and that buton would toggle (hide-show) the rest of the menu items.It would require some additional lines of javascript but doesnt sound too complicated. Will try to look into it.
I would even be happy with a
Thanks Ivan, very interesting.
I would even be happy with a modified menu block module where you could choose the output as a select list rather than an html list.
Sam.
My quickmenu hack does not
My quickmenu hack does not work very well on Android. We need a talented module or theme coder to come up with a solution :-)
The idea for the design as used in my original post was taken from facebook and google and seems like it will becoming a well understood metaphor.
@MrPaulDriver
Hi Paul, Android uses its own
Hi Paul,
Android uses its own default styling when dealing with select lists so I don't think you can modify them. They pop up on their own, independant of any styling you have applied to the web page.
I actually think yours isn't that bad, just tried it on htc desire using Miui ROM. The navigation is easy enough to use and people wouldn;t know what it's 'supposed to look like' as they are on a mobile in the first place. I styled my select list too until I noticed android doesn't respect the css at all. Or iPhone for that matter.
This link was kindly sent to me the other day which shows a few options:
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
I quite like the hidden areas that expand to reveal the menus. All in all though, this is a tricky one, navigation on a phone sucks most of the time. Even an unstyled select list isn't too bad either, just not very cutting edge.
Sam.
Planet Drupal Article
Just spotted this today and thought it should be cross posted here.
http://friendly-machine.com/posts/2012/navigation-patterns-responsive-de...
@MrPaulDriver
Another toggle type responsive menu that works nicely
http://www.fluidbyte.net/simple-responsive-jquery-navigation-plugin
Interesting discussion
See also http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial
Another approach to mobile navigation
Using a slide toggle for the top menu works fine for mobile as long as you don't have too many menu items or long item titles. As long as you can fit everything across the top in the desktop view all is fine. However for larger sites that have deep menus and long item titles having a left side nav gives your more room to work with.
For the new themes we're building with Omega as a base theme we have a main menu going across the top and a sub-menu with many more items in the first sidebar. On mobile the main menu switches to a slide toggle with a simple menu link (no icon), and a sub menu link appears next to this. The sub menu link simply jumps you down to a named anchor where the first sidebar is. We use Omega's content first souce ordering to position the content column on top, with the first sidebar and it's sub menu at the bottom. Putting the deeper menu after the content and using an anchor link was explained in Luke Wroblewski's book "Mobile First," it just so happens that Omega makes this very easy to do.
Victor Velt
Yale University Office of Public Affairs & Communications
http://opac.yale.edu
I just tried out the Web
I just tried out the Web designer wall menu for a Drupal 7 theme I am contributing to drupal.org and I really like this menu. I made a few modifications but it's really nice and probably fits most use cases. I also adjusted the width for wider menu items but it's still well within parameters of a narrow-ish screen such as the iPhone.
Of note for the modifications was the code:
$("#menu-icon").on("click", function(){.onwill not work with JQuery below v 1.7 and I don't want my theme to be dependent on JQuery update so I simply changed it to:$("#menu-icon").click(function() {... and it worked fine.
High Rock Media | Drupal Photography | Skype: highrockmedia | Twitter
Looks like we've got a module at last
I picked this up from the Drupaleasy podcast. See http://drupaleasy.com/podcast
It's a blog post by Kendall Totten of Mediacurrent. See http://www.mediacurrent.com/blog/responsive-design-mobile-menu-options
Turns out that they've developed a sandbox module for Omega called Mobile Menu Toggle. See http://drupal.org/sandbox/kbasarab/1791874
The podcast is well worth listening to as Kendall goes into some detail about how to use the module.
I haven't tried it yet, but will post my thoughts when I do.
@MrPaulDriver
There's now an Alpha release
There's now an Alpha release of my theme using the menu from Web designer Wall . The mobile menu kicks in at <= 768 which is typically portrait on an iPad.
http://drupal.org/project/bamboo
I also have a demo here: http://bamboo.themehuis.com/
High Rock Media | Drupal Photography | Skype: highrockmedia | Twitter
This looks a good one
I spotted this multi-level menu today. It looks very nice indeed...
http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
Can anybody turn this into a module?
@MrPaulDriver
multi level menu
This menu ships with Phase2's OpenPublish, they may be interested in contributing to this. I use it on www.photofestivals.com.au
Responsive mobile menu
Here is my modest contribution to the topic http://www.webmar.com.au/blog/how-create-responsive-mobile-menu-omega-su... and the demo is in the main menu as I use it on my own site.
tested and works well in Opera, Chrome, Firefox, Safari and IE8+
Drupal web developer and Search Engine Optimisation consultant at Webmar Design & Development Brisbane, Australia
Google+
Getting access denied on that
Getting access denied on that node...
Same here
I guess you are talking about www.photofestivals.com.au
@MrPaulDriver
No - I get site under
No - I get site under maintenance for that site. I was referring to the article referred to by Kristina Katalinic in comment #920468
@jamiet sorry about that,
@jamiet
sorry about that, should be working fine now
Drupal web developer and Search Engine Optimisation consultant at Webmar Design & Development Brisbane, Australia
Google+
@jamiet
www.photofestivals.com.au now online, just realised an error on module updates, the site does not deactivate maintenance mode once updates are completed, your comment made me aware of this.
Any change of a write-up?
I really like how you have implemented this menu on photofestivals.com.au
Any chance you could find time to write-up your method for this?
I for one would very grateful and I am sure others would be too.
@MrPaulDriver
have you seen this link for respnsive nav.
http://responsive-nav.com/
from the same guys who brought us tinynav.js.
Looks ok but.... 1. I don't
Looks ok but....
1. I don't see support for submenu items and also I really dislikes when a menu "pushes" the rest of the page down when it opens.
2. I don't see a working code for Drupal implementation
3. My solution above is only 4Kb on disk non minified and non gzipped so the weight ratio is similar. However, my solution has a working code for implementation in Drupal and it also has no dependancies.
Not saying responsive-nav is not a good solution but we have quite a few of these js solutions around already in but few have been implemented in Drupal and as far as I can see responsive-nav brings nothing new to the table compared to some other solutions out there.
Drupal web developer and Search Engine Optimisation consultant at Webmar Design & Development Brisbane, Australia
Google+
thanks for your perspective kristina..
interesting points .. appreciate your eye and knowledge..
A module for rule them all mobile navigation solutions!
Hey guys,
Im developing a Mobile Navigation solution.
https://drupal.org/sandbox/x7ian/1996698
Please test this module and write issues.
Im currently in early development so all suggestions are welcome,
;-)
Si se puede imaginar, se puede programar.
I've been pondering this
I've been pondering this issue for a while, tried different plugins, code and modules and finally came to a jQuery plugin called FlexNav. The bottom line is that it satisfies a lot of needs:
From a UX perspective, I think it's ideal for touch devices as well as traditional mouse based clicking. You can read more about it here how I integrated this with Drupal, I wrote a blog post:
http://highrockmedia.com/blog/theming-multi-level-responsive-menu-drupal-7
High Rock Media | Drupal Photography | Skype: highrockmedia | Twitter
Here is another new module
https://drupal.org/project/responsive_navigation
Related article... http://www.webomelette.com/responsive-navigation-cool-drupal-module
@MrPaulDriver