search

ComputerWolf / SlickNav

Responsive Mobile Menu Plugin for jQuery
MIT License
939 stars 314 forks source link

Can you make it work with JQMobile? #60

Closed ragscoon closed 9 years ago

ragscoon commented 9 years ago

I have slickNav on a prototype site I'm developing, I have it working great for the Main NAV menu, but when I add JQuery Mobile to the page so that I can work with Panels.. slickNav dies! It will not even show up unless I remove JQuery Mobile, more specifically the CSS file for JQMobile, but I suspect there is a change in the JQuery Mobile javascript that is clashing with slickNav.

Has any one else used slickNav on the same page as JQuery Mobile? If so, how did you get it to work?

ragscoon commented 9 years ago

Found the solution to making this work with JQuery Mobile. JQM requires a wrapper DIV 

<div data-role="page">

just after the body tag that wraps the entire page. Add an ID of say "mobilePage" ( it can be anything you want really ) to that tag, like this:

 <div id="mobilePage" data-role="page">

Then change the prependTo setting from "body" to "#mobilePage" 

$('#menu').slicknav({
   label: 'Menu',
   duration: 100,
   prependTo:'#mobilePage',
   closeOnClick:true
});

and all should work as designed.

If you want to make slickNav auto close when you click off of it any where else on the page simply add another wrapper div inside the #mobilePage div with an id="clickArea". The click area div must wrap the entire page content and end just before the #mobilePage end tag.

<body>
<div id="mobilePage" data-role="page">
<div id="clickArea">
... content ...
</div>
</div>
</body>

Then set your document ready functon like so:

$(document).ready(function(){
$("#clickArea").click(function () { $("#menu").slicknav('close') });

$('#menu').slicknav({
   label: 'Menu',
   duration: 100,
   prependTo:'#mobilePage',
   closeOnClick:true
});

});

Now slickNav will auto close when you click outside the menu area.