CODEWITHSUNDEEP
cordovajquery-mobile
HellOfACode
HellOfACode

Reputation: 1743

Jquery-mobile slide in menu solution

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.

Upvotes: 11

Views: 53835

Answers (4)

Pouya Danesh
Pouya Danesh

Reputation: 1627

I think what your looking for is fast and easy way. if I'm right you should use this jquery mobile demo it explained the positioning and everything else u might need, if you want it to be perfect just combine that demo with this one

second one explained how to have a side slider using swipe.

i used them both for my phonegap app hope you do too.

Upvotes: 0

EddieB
EddieB

Reputation: 5001

Use jQuery Panels... included with jQuery.

http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

Upvotes: 0

Nate Flink
Nate Flink

Reputation: 3984

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/

Upvotes: 9

frequent
frequent

Reputation: 28493

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.

Upvotes: 12

Related Questions