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.

回答1:

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.

回答2:

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/

回答3:

Use jQuery Panels... included with jQuery.

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

回答4:

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.

来源：https://stackoverflow.com/questions/13064816/jquery-mobile-slide-in-menu-solution

标签

cordova

jquery-mobile