Menu
Hi im trying to build a phonegap application using jquery mobile. i would like to create a slide in menu like in the facebook application.
i have searched a lot but all the plugins or solutions are old and some even dont work in the demos. any suggestions how to do this? the idea is the that there should be a button on the left side of the header of a jquery mobile page, when pressed it slides in the menu from the left side simultaneously pushing the page to the right side.
695
Have you tried this:
Facebook Style Slide Out Menu
also, the JQM popup can be used like a slide out menu:
Jquery Mobile Popup SideMenu
Both of which should pretty much do what you need.
137
I recently needed to do the exact same thing. Here is the code I use for a simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Computer World</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
/*this block should go in the styles.css file*/
.ui-panel-inner {
padding:0px; /*make the buttons flush edge to edge*/
}
.ui-controlgroup {
margin:0; /*make the buttons flush to the top*/
}
#header {
height:54px;
}
#bars-button {
margin:7px;
}
</style>
</head>
<body>
<div data-role="page" id="home" data-theme="b">
<div data-role="panel" id="navpanel" data-theme="a"
data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
<a href="#" data-role="button">Business</a>
<a href="#" data-role="button">Numbers</a>
<a href="#" data-role="button">Money</a>
<a href="#" data-role="button">People</a>
</div>
</div>
<div id="header" data-role="header" data-theme="b">
<a id="bars-button" data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel">Menu</a>
</div>
</div>
</body>
</html>
For more detailed info here is a blog post: http://www.objectpartners.com/2013/05/13/adding-a-sliding-menu-to-your-jquery-mobile-app/
Here is a Demo: http://jsfiddle.net/nateflink/NWHjB/
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
