Help with making menu button for jQueryMobile

Question

new to jquery and jquerymobile.

All I want to do is hide the main menu, and create a "Menu" button on the top nav bar. When user clicks on this button a pop up appears with the "top-menu".

I cheated and on the mobile.css I turned the "top-menu" to display:none to initially hide it.

EDIT

Got it closer, but not perfect. Now on Menu click (was looking for onTouch or onTap but couldn't find API info) menu appears. Is there a way that instead of it appearing it opens on a pop up window?

Also, for some reason data theme or icon not showing up either.

$(document).ready(function(){
    $('#header').append('<div data-role="navbar"><ul><li class="mainMenu"><a href="#" data-iconpos="top" data-icon="grid" data-theme="b">Menu</a></li><li><a href="#">facebook</a></li><li><a href="#">Twitter</a></li></ul></div>');
    $('.mainMenu').click(function() {
      $('#top-menu').toggle('fast', function() {
        // Animation complete.
      });
    });
});

Answer 1

The JQM CSS is not applied to what you add manually to the DOM. You have to call .page() on that item.

For details see http://jquerymobiledictionary.dyndns.org/faq.html - question about DOM additions

[edit]

This might be better than hacking it: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

[as a response to your edit]

First of all - try not to use javascript for what it's not needed. Why fill the header with javascript if you don't need it? You didn't use any variables there.

Second thing - you didn't read my tutorial. NO jquery mobile specific stuff will be applied if you create new DOM content after document is ready. If you do that, you have to call .page() on new content. That's why it still doesn't work.

Events are avaliable in the docs&demos section http://jquerymobile.com/demos/1.0a2/ just have to click events.

Finally - there are no popups in mobile phones. If you ment a dialog take a look at dialogs in JQM docs.

Jquery was a totally different approach to javascript and jquery mobile is also a new idea. Your intuitions and experience from jquery will remain useless for some time, until you get the idea of jqm and what it's for.

This might happen quicker if you read a bit on progressive enhancement.

Good luck.