Close

Not a member yet?Register now and get started.

lock and key

Sign in to your account.

Account Login

Four Ways to Implement a Global Menu in jQuery Mobile

21 Nov. 2011 Posted by Shane Gliser in mobile, jquery mobile, user experience

Navigation is the hardest thing to get right in any application. Mobile only compounds the issue. jQuery Mobile doesn't (and shouldn't) have a pre-built global navigation structure. This leaves room for flexibly and creativity on the part of the designers, but also leaves some scratching their heads and wondering what to do. So, here are what I believe to be the three best ways to create global menus and the reasons why you might choose each.

Author's Note:

Creating Mobile Apps with jQuery Mobile by Shane GliserPackt Publishing recruited me to write a book on jQuery Mobile!

Once you've read this article and found it useful, you should order my book. It's full of real world examples that span several industries and technologies using jQuery Mobile. The eBook editions are cheap and obviously, you know where to come if you have follow up questions ;-)

Check out Creating Mobile Apps with jQuery Mobile

This post is not about setting fixed position headers and footers. If that's what you're looking for, check out the touch overflow or fixed toolbars. However, in general, I would discourage this practice because it just takes up space and usually doesn't add any real value. That being said, let's get on with the meat of the post. Here are three four ways...

  1. The home screen IS the global menu
  2. The global menu is a sub-page
  3. The global menu lives at the bottom of each page (my recommendation)
  4. jQuery Mobile Panel

Option 1 -- The Home Screen IS the Global Menu

This option makes a lot of sense on its face. Mobile makes you focus very tightly on what's important, so naturally, most of the things that you would put in a global menu should probably also be present on the home page. It's not a far stretch to make it fully official. This was the approach taken by Stanford University. I think we can safely assume that smart people made this site.

Stanford Home Screen  Stanford News

Pros & Cons

  • Pro: Simple & focused
    This implementation further enforces the mobile imperative of keeping your site well focused on what's important.
    Chances are, if it doesn't belong on your home screen, it's probably not worth putting on your mobile version of the site anyway.
  • Pro: Good UX
    This will feel natural to your users. As developers (and some power users) we realize that you can click on a logo and it will always take you back to the home screen, however, not all users realize that. Having an explicit home button removes the uncertainty.
  • Pro: Speed
    Because your users likely hit the homepage first, there's a high likelihood that it will stay in the browsers cache and thus be quickly accessible.
  • Con: Too many stakeholders in the kitchen
    Almost inevitably, unless you have a UX department with a strong backbone and senior management to back you, the homepage will likely be made to serve the many departments of your organization who feel they have an equal stake in the real estate of the homepage. When that happens, your mobile site will lose its user centered / task based focus and you'll wish you had a separate menu.
  • Con: Loss of contextual opportunities
    You'll see what I'm talking about later.

Option 2 -- The Global Menu is a Sub-Page

This option leads to the cleanest interface and the most flexibility. To implement this, use the multi-page example from the jQuery mobile docs (view the source to see how it's done). This is still maintainable as a single file using server side includes.

Slide Share Homescreen  Slide Share Menu

Pros & Cons

  • Pro: Scalable
    Your main menu can be as large as you like without polluting the homepage with things it may not need.
  • Pro: Context
    Since the main menu is actually built as a sub-page to each "page", it gives you a great chance for some contextual relevance. For example, if you're on a list page of your contacts, it might make sense for their to be some sort of controls around those contacts embedded in the menu for that page followed by the usual main menu content.
  • Pro: Native Feel & Speed
    Sub-pages have zero load time, only transition time. This will give your page a more "native" feel. This is especially true if you have the menu button at the top of the page and the menu itself is brought down from the top in a "slidedown" fashion.
  • Con: Questionable UX
    Users have a tendency to first look for what they want on the page. There's a fair chance they may even scroll through the page looking for what they expect before they figure out that you must have thrown it into your menu. User may give up and start looking other places or just leave if they don't think to look in your menu. This approach is learnable and once users get what the menu can do for them, they'll probably be fine. It is a very common approach, it's just may not be the most obviously useful to the user.

Option 3 -- The Global Menu Lives at the Bottom of Each Page

This is actually the approach that I have adopted after noting that Amazon was. When Luke Wroblewski created BagCheck, it was also the approach he used.

The menu button is up at the top where one might expect. The global menu itself is present at the very end of the pages. This approach has all the benefits of Option 2 without the drawbacks.

In a normal website, this would be simply executed by using in-page anchors like index.html#menu. For jQuery Mobile people, this indicates a change to a sub-page. To get around this, you can code the menu button like this....

<a href="#" onclick="$.mobile.silentScroll($.mobile.activePage.find('.mobileMenu').position().top)" class="ui-btn-right" data-icon="grid">Menu</a>

At the bottom of the page, you can implement the back to top link like this...

<li data-icon="arrow-u"><a href="#" onclick="$.mobile.silentScroll(0)">Back to Top</a></li>

Roughly Brilliant Mobile Page  Roughly Brilliant Menu

Pros & Cons

  • Pro: Scalable
    Add as many options as you like (within reason) and it's not going to feel unnatural.
  • Pro: Speed
    It's already on the page. You don't even need a page transition to get to it.
  • Pro: Context
    This version actually supports page relevant context even more than option 2. It's presence in the page itself only serves to strengthen the contextual options (if you have any).
  • Pro: Excellent UX
    Provided you have made a page that doesn't suck, the user is likely to start reading the content immediately. When they reach the bottom, you can immediately present them with a link back to the top, other relevant options along, and your main menu.
  • Con: There's no pretending
    Apps typically do not use this interface. If you're planning on using PhoneGap to compile your HTML interface into a native app, this will make it feel less native. That being said, it might actually be a good idea anyway.

Option 4 -- jQuery Mobile Panel (New to v1.3)

As of version 1.3, jQuery Mobile now supports panels. These are quickly becoming a standard in the mobile world.

Here we see the native apps for Facebook, Google Plus, and then jQuery Mobile's panels respectively.

Facebook menu   Google Plus menu   jQuery Menu closed   jQuery Menu open

Pros & Cons

  • Pro: It's made by the pros at JQM.
  • Pro: It's repsonsive and looks great on a device of any size.
  • Con: Doesn't lead to the same leve of potential engagement as option 3. Although, there's nothing to say you couldn't combine these two approaches with the global menu in the panel and suggested next stories at the bottom.

Read more about jQuery Mobile Panels

Now, go be brilliant!

Comments

Submitted by Frederick (not verified) on Tue, 01/10/2012 - 23:38 #

Thanks for the great tutorial! I ended up using option 3 on a site I was building - only trouble is the "menu" link doesn't work when I click on it - it doesn't scroll down. Any ideas? The website is at /edited out/
Cheers,
Fred

Submitted by Shane Gliser on Wed, 01/11/2012 - 12:51 #

I looked at your site and I'm wondering if you fixed it since you left the comment because it's working great on my iPhone 4s and iPad2. I also tried it on a WinPhone 7 emulator and experienced no issue. I tried on a friends android and it went to the menu just fine but you do seem to have a bug on that platform with returning to the top. On that it skipped to the top and then right back to the bottom.

What platform was it not working on for you?

Submitted by Frederick (not verified) on Wed, 01/11/2012 - 13:35 #

Yeah sorry I managed to fix it after I posted that comment - it was most likely an issue with some other scripts that my drupal install was inserting on the page - when I deleted the <?php print $scripts ?> line, it solved the problem - and saved about 200kb of javascript! It doesn't look like it's hurt any of the other functionality provided by those scripts. Thanks for your time!
Cheers,
Fred

Submitted by Pali (not verified) on Fri, 04/27/2012 - 08:08 #

for me works only this onclick definition in Menu link:
$.mobile.silentScroll($.mobile.activePage.find('.mobileMenu').offset().top);
Best regards
Pali

Submitted by Frank (not verified) on Wed, 05/23/2012 - 17:00 #

cool article that is

Submitted by Shane Gliser on Wed, 05/23/2012 - 18:15 #

Nice Yoda impression that is.

Submitted by Mats (not verified) on Wed, 06/13/2012 - 16:37 #

I used a global select menu for navigation. Works great as far i can tell.

Thanks for your posts on jqm! Great tips and ideas!

Cheers
Mats

Submitted by Adam Fridental (not verified) on Tue, 01/01/2013 - 15:05 #

Great information! loved it.

I've chosen to listen to your advice and located the menu at the bottom of the page.

One small thing, the "Menu" button at the top didn't always worked - it didn't took the page all the way to the bottom of the page, what I've used as the href so it will work is this:
$.mobile.silentScroll($('.mobile-menu').offset().top)

Good luck!

Submitted by x7ian (not verified) on Fri, 01/25/2013 - 19:03 #

Hello! i like jquery mobile and i can see its power.
The problem i find on using it is that i like to use responsive design.
I would like to ask you if there is a way to create a responsive website where jquery mobile loads only in the mobile versions. The probelm is that if i load jquery mobile libraries, they will load even in the normal or wide displays.
Thats the reason that i havent been able to use jquery mobile, and i allways end up using traditional jquery to do things like creting a collapsible menu, like the ones in this post. I allways have to do a collapsible menu and make it work with jquery so it shows up collapsed only when the website is on a mobile device.
Ive been googling a lot loking for a way to combine responsive design with jquery mobile without any success.
Do you know a way to do that? or is it that when using jquery mobile i always have to do a separate theme on a different subdomain say, www.example.com for my main website and m.example.com for the mobile version??

Submitted by Shane Gliser on Sun, 01/27/2013 - 15:58 #

I have answered this question as a new post on http://roughlybrilliant.com/responsive_design_and_jquery_mobile

Submitted by Thomas (not verified) on Wed, 02/06/2013 - 09:23 #

Hi,

I am using jQuery mobile on a page that has some text/content at the top of the page with a form to submit comments at the bottom of the page. On validation, if there are errors I'd like to scroll to the top of the form (at the bottom of the page) and show the errors (or a success message) for them to fix. I tried <a name="topOfForm"></a> with the <form action="#topOfForm" data-ajax="false">...</form>, but no luck. Can you provide a suggestion using your technique?

Thanks!

Submitted by Shane Gliser on Wed, 02/06/2013 - 22:05 #

Kinda like this? http://roughlybrilliant.com/examples/example_using_jquery_validate_and_j... Ideally, you don't want to put the messages at the top. Feedback should be on the fields where the error is. The jQuery Validate framework will show the error, stop form submition, and place the cursor on the field in error.

Submitted by Vali (not verified) on Tue, 04/02/2013 - 06:11 #

With JQM 1.3.0 you can use panels to build a global menu.

Submitted by Shane Gliser on Tue, 04/02/2013 - 13:16 #

Yep, it's true, and now that I'm done writing the book, it's time to update this post.

Submitted by Trevor (not verified) on Tue, 04/09/2013 - 01:33 #

Thanks for the article. I found myself googling 'jquery mobile side navigation' etc. eventually I came across your article and realized that I was actually looking for option 4 - panels.

Post new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
Are you a human? Let's just be sure...