mmenu taking full page instead of sliding

Question

I'm working on a Cordova/PhoneGap project where I use jQuery/ jQuery Mobile and an excellent plugin called mmenu from http://mmenu.frebsite.nl.

I am doing an .ajax call from a remote server and creating the menu content and appending it to the jQM header section, which is fine.

$.ajax({
    type: 'GET',
    url: 'http://localhost/service/action',
    crossDomain: true,
    dataType: 'jsonp',
    contentType: "application/javascript",
    jsonp: 'callback',
    jsonpCallback: 'mycallback',
    async: false,
    error: function() {
        alert("Error");
    },
    success: function(data) {
        var html = "";

        $.each(data, function(index, element) {
           html += '<li><a href="' + element + '.html">' + element + '</a></li>';
        });

        html = '<nav id="menu"><ul>' + html + '<ul></nav>';

        $("body").append(html);
    }
});

The HTML page header section where the menu is shown:

<div data-role="header">
     <a href="#menu" data-icon="grid" data-iconpos="notext">Menu</a>
     <h1>Demo</h1>
</div>

All things appears fine..

My Question:

But when I click on the menu, the menu does not slide.. but it takes the whole page with a white background. All the expected menu content are there.. but not as a sliding panel..

Please let me know what I am doing wrong.

Answer 1

As suggested by @frequent, I have moved to JQM Panels as I am not able to solve this problem with mmenu for past few days.

jQM Swipe Panel design:

http://view.jquerymobile.com/1.3.0/docs/examples/panels/panel-swipe-open.php#demo-page