mmenu js API - 菜单未显示

Question

I want to use the mmenu js API but I'm having some difficulties.

I was able to put a basic example up and running and all was fine. Next, I tried to add a searchfield but the searchfield wasn't showing. At that point I realized that the source js file I was using didn't have the searchfield add-on.

After some googling, I found a link to the jquery.mmenu.all.js file that supposedly has all of the add-ons. But then I hit another problem. You can see the animation of the menu but, it show up blank because its css display property is set to "none".

I'm using the following javascript to call the API.

var myMenu = $("#menu");

// initialize mmenu
myMenu.mmenu({
               "navbars": [
                  {
                     "position": "top",
                     "content": [
                        "searchfield"
                     ]
                  }
               ],
               "searchfield": {
                  "panel": true
               }
            }, {
               "searchfield": {
                  "clear": true
               }
            });

// initialize mmenu API
var myMenuAPI = myMenu.data( "mmenu" );


// function to set to specific subMenu
function setMMenu(subMenu) {
  // set to subMenu
  var current = myMenu.find(subMenu);

  // myMenuAPI.setSelected(current.first());
  myMenuAPI.openPanel(current.closest(".mm-panel")); 
}

// function to open mmmenu to specific subMenu
function openMMenu() {
  myMenuAPI.open();
}

You can see my problem in this fiddle.

http://jsfiddle.net/6anbksxd/

Can you guys help me out here?

Thanks in advance

Answer 1

Add this to your CSS please.

mm-menu.mm-offcanvas.mm-hasnavbar-top-1.mm-opened {
  display: block;
}

Updated JSFiddle .