Twitter: raymondcamden


Address: Lafayette, LA, USA

Example of adding menu support to a PhoneGap Application

05-30-2012 23,782 views Mobile, JavaScript, HTML5 11 Comments

Last night a fellow on Twitter asked about how to build in menu-key support in PhoneGap. I promised him a simple application that demonstrated this feature and would - hopefully - give him something to build on. Much like my earlier blog post on adding a context menu to a jQuery Mobile application, the process breaks down to two parts:

First - we build in support for noticing the menu button click. Second - we build the UI to create (or hide) a menu. Let's take a look at a simple demonstration of this.

The official API docs for the menu button event demonstrates that it is rather trivial to listen for the click. Of course, this only applies to Android and Blackberry devices, but the code is just an event listener: document.addEventListener("menubutton", yourCallbackFunction, false);

I began with an HTML page that simply listened for this button and logged it to the console.

I pushed this to my device and confirmed that I could see when the menu button was clicked. (Need help with that? See this blog post on the topic.)

As I said - this part is trivial. Now that I know when the menu button is clicked, I need to create some type of UI element. Remember - I'm where design goes to die. Many Android apps tend to create a squarish menu towards the middle bottom of the application. So I created a div, positioned it, and hid it by default. I then used a tiny bit of JavaScript to either show or hide the div.

Nothing too much to it, right? Here's how the application looks when I start it...

And here is it with the menu open:

That's it. Obviously it could look a lot better. Also - my links don't actually do anything. A real application would not only listen out for those clicks but also ensure they dispose of the menu. But hopefully this gives you enough to get started.

11 Comments

  • eyal #
    Commented on 08-02-2012 at 1:04 PM
    when i have a big page with text the menu appears in the middle of the page.
  • Commented on 08-02-2012 at 1:57 PM
    I just did a quick test where I added a lot of text to the page and was not able to reproduce this. What hardware are you using?
  • Danny #
    Commented on 08-22-2012 at 11:09 AM
    Thanks your ! it's working like a charme (:
  • Commented on 09-09-2012 at 12:39 PM
    Just an FYI - folks may want to check out this menu plugin - looks to be very well done:

    https://github.com/mwbrooks/cordova-plugin-menu
  • Commented on 09-24-2012 at 1:39 PM
    It's work for me..

    but i want to close menu when i press Backbutton key Android.. How its work ? Please, tell me ! :)
  • Commented on 09-24-2012 at 1:40 PM
    Add an event listener for the back button. It is also part of the PhoneGap API.
  • Commented on 01-06-2013 at 1:26 AM
    Excellent example! Thanks for pointing me in the right direction :)
  • Commented on 04-10-2013 at 8:20 AM
    At first I would like to thank to you. But I have a simple problem in here. When I press 'Menu Button Of The Phone' then it works and another menu name 'Settings' are displayed. Why ? Plz do something about this.
  • Commented on 04-10-2013 at 4:49 PM
    What device? Did you use my code exactly?
  • Commented on 06-03-2013 at 3:39 AM
    Very nice tutorial you can also check this one at
    <a href="http://www.pavanh.com/2012/10/android-menu.html&qu...;
  • Commented on 11-22-2013 at 5:06 AM
    :) I can solve my this problem. Thanks again.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty