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.
Can you guys help me out here?
Thanks in advance
Advertisement
Answer
Add this to your CSS
please.
mm-menu.mm-offcanvas.mm-hasnavbar-top-1.mm-opened { display: block; }
Updated JSFiddle.