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.
Archived Comments
when i have a big page with text the menu appears in the middle of the page.
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?
Thanks your ! it's working like a charme (:
Just an FYI - folks may want to check out this menu plugin - looks to be very well done:
https://github.com/mwbrooks...
It's work for me..
but i want to close menu when i press Backbutton key Android.. How its work ? Please, tell me ! :)
Add an event listener for the back button. It is also part of the PhoneGap API.
Excellent example! Thanks for pointing me in the right direction :)
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.
What device? Did you use my code exactly?
Very nice tutorial you can also check this one at
<a href="http://www.pavanh.com/2012/...">http://www.pavanh.com/2012/...
:) I can solve my this problem. Thanks again.
nice n helpfull idea, btw why not using fixed position?
My CSS is pretty sucky. Absolute is not fixed?