Javascript mmenu使用整页而不是滑动

我正在从事一个Cordova/PhoneGap项目，在这个项目中，我使用jQuery/jQuery Mobile和一个名为mmenu的优秀插件

我正在从远程服务器调用.ajax，创建菜单内容并将其附加到jQM头部分，这很好

$.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);
    }
});

$.ajax({
键入：“GET”，
网址：'http://localhost/service/action',
跨域：是的，
数据类型：“jsonp”，
contentType:“应用程序/javascript”，
jsonp:“回调”，
jsonpCallback:“mycallback”，
async:false，
错误：函数（）{
警报（“错误”）；
},
成功：功能（数据）{
var html=“”；
$.each（数据、函数（索引、元素）{
html+='
'；
});
html='
'+html+'
'；
$（“正文”）.append（html）；
}
});

显示菜单的HTML页面标题部分：

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

演示

一切似乎都很好

我的问题：

但是当我点击菜单时，菜单不会滑动。。但它需要整个页面的白色背景。所有预期的菜单内容都在那里。。但不是作为滑动面板

---

请让我知道我做错了什么。

根据@frequent的建议，我已转到JQM面板，因为我在过去几天无法使用mmenu解决此问题

jQM滑动面板设计：

---

你能在JSFIDLE或plunker中设置一个演示吗？我试过这样做，因为我的所有问题都是这样做的。但正因为如此，我觉得很难把这个问题一五一十地复制出来。我的确切场景使用来自localhost和cordova js文件的ajax调用。。如果您可以指向与mmenu相关的现有fiddle，我可以修改它。它可能与JQM不兼容。尝试

$.mobile.activePage.append（html）。实际上，内容附加在标记之前，因此可以。mmenu插件希望id位于身体内的任何位置。为什么不直接使用？从我看来，你的插件和JQM的插件做得一样。