Example of adding menu support to a PhoneGap Application

This post is more than 2 years old.

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by eyal posted on 8/2/2012 at 10:04 PM

when i have a big page with text the menu appears in the middle of the page.

Comment 2 by Raymond Camden posted on 8/2/2012 at 10: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?

Comment 3 by Danny posted on 8/22/2012 at 8:09 PM

Thanks your ! it's working like a charme (:

Comment 4 by Raymond Camden posted on 9/9/2012 at 9:39 PM

Just an FYI - folks may want to check out this menu plugin - looks to be very well done:

https://github.com/mwbrooks...

Comment 5 by mkhuda posted on 9/24/2012 at 10: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 ! :)

Comment 6 by Raymond Camden posted on 9/24/2012 at 10:40 PM

Add an event listener for the back button. It is also part of the PhoneGap API.

Comment 7 by Rob Abby posted on 1/6/2013 at 12:26 PM

Excellent example! Thanks for pointing me in the right direction :)

Comment 8 by Md. Rezwan Saki Alin posted on 4/10/2013 at 5:20 PM

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.

Comment 9 by Raymond Camden posted on 4/11/2013 at 1:49 AM

What device? Did you use my code exactly?

Comment 10 by pavan posted on 6/3/2013 at 12:39 PM

Very nice tutorial you can also check this one at
<a href="http://www.pavanh.com/2012/...">http://www.pavanh.com/2012/...

Comment 11 by Alin posted on 11/22/2013 at 4:06 PM

:) I can solve my this problem. Thanks again.

Comment 12 by djsamm88 posted on 8/28/2015 at 8:01 AM

nice n helpfull idea, btw why not using fixed position?

Comment 13 (In reply to #12) by Raymond Camden posted on 8/28/2015 at 8:09 AM

My CSS is pretty sucky. Absolute is not fixed?