话说使用jQuery已经有好几年了，从最开始的1.4到现在的2.1，越用越觉得方便，jQuery有一个移动开发的插件，那就是jQuery Mobile，一直有没有使用过这个插件，今天兴致好就试着制作一个侧边栏滑动菜单，效果还不错，现在分享给大家。

准备工作

我们需要jQuery.min.js和jQuery.mobile.min.js文件，还有jQuery.mobile.min.css文件，将他们添加到我们的网页中。

HTML代码

我们先添加菜单的HTML代码，默认状态下不显示在页面上。

编写内容的HTML，我们需要一个按钮来让菜单显示。

CSS代码

body {
    -webkit-text-size-adjust: none;
    background: #5a5959 url(../images/menuBg.gif) top left repeat-y;
}
.pages h3 {
    font-size: 20px;
    margin: 0;
}
#menu {
    background-color: #5a5959;
    float: left;
    height: 100%;
   
}
#menu h3 {
    font-family: arial;
    font-size: 12px;
    color: #fff;
    margin: 0;
    padding: 4px 0 4px 10px;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(5%,rgba(90,89,89,1)),color-stop(85%,rgba(66,65,65,1)));
    border-top: solid #6b6b6b 1px;
    border-bottom: solid #3d3d3d 1px;
    text-shadow: 0 -1px 1px #333;
}
#menu ul {
    margin: 0;
    padding: 0;
    width: inherit;
}
#menu ul li a:link,
#menu ul li a:visited {
    border-bottom: solid #333 1px;
    box-shadow: 0 1px 0 #727272;
    color: #fff;
    display: block;
    font-family: arial;
    font-size: 14px;
    padding: 10px 0 10px 10px;
    text-decoration: none;
    text-shadow: 0 1px 1px #000;
   
}
#menu ul li a:hover,
#menu ul li a:active {
    background-color: #716f6f;
}
.ui-body-c {
    background-color: #fff;
    line-
}
.active {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(30,29,29,1)),color-stop(21%,rgba(56,55,55,1)));
    color: #fff;
    text-shadow: 0 1px 1px #000;
}

JavaScript代码

$(document).bind("mobileinit", function () {
    $.mobile.pushStateEnabled = true;
});
$(function () {
    var menuStatus;
    var show = function() {
        if(menuStatus) {
            return;
        }
        $('#menu').show();
        $.mobile.activePage.animate({
            marginLeft: "165px",
        }, 300, function () {
            menuStatus = true
        });
    };
    var hide = function() {
        if(!menuStatus) {
            return;
        }
        $.mobile.activePage.animate({
            marginLeft: "0px",
        }, 300, function () {
            menuStatus = false
            $('#menu').hide();
        });
    };
    var toggle = function() {
        if (!menuStatus) {
            show();
        } else {
            hide();
        }
        return false;
    };
    // Show/hide the menu
    $("a.showMenu").click(toggle);
    $('#menu, .pages').live("swipeleft", hide);
    $('.pages').live("swiperight", show);
    $('div[data-role="page"]').live('pagebeforeshow', function (event, ui) {
        menuStatus = false;
        $(".pages").css("margin-left", "0");
    });
    // Menu behaviour
    $("#menu li a").click(function () {
        var p = $(this).parent();
        p.siblings().removeClass('active');
        p.addClass('active');
    });
});

好了，以上就是这个效果的全部代码。