May 13, 2013

Adding a Sliding Menu to Your Jquery Mobile App

This post will detail the creation of a Jquery Mobile Panel, like the Facebook app, customized with menu items and icons for a functional chunk of code ready to drop in your next JQM project. This provides a centralized place to group navigation items that can be accessible across views within a given app.

Just want the code?

View Demo on JSFiddle

These days it seems like everyone and their uncle is developing web resources targeted at the mobile experience. In general my personal bias is toward native development on iOS (or even Android), because of the superior performance and quality of the UX. However in lots of cases it makes sense for companies to build mobile web apps that can work on any platform. Using JQuery Mobile is probably the best choice due to the wide support of devices the framework maintains, if you don’t mild putting up with a touch of “divitus”

JQM has lots of nice widgets to use. Newly included in the library is a “panel” element that can slide out from either the left or the right side, similar to the Facebook or Gmail apps.

i. Let’s get started!

The first step is setting up your page with the standard libraries. Head over to http://view.jquerymobile.com/ and grab the starter block.

The URL at the time of this writing is: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/pages/

IMPORTANT! Look for the most up to date version on the JQM site.

<!DOCTYPE html>
<html>
<head>
    <title>Computer Worlds</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 src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>

<body>
...content goes here...
</body>
</html>

Also, to note you can head over to http://html5boilerplate.com/mobile/ or http://www.initializr.com/ and download a more comprehensive template. I prefer to keep this really simple to begin with, and then add all the extras as I need them. Another simple boilerplate: http://csswizardry.com/2011/01/the-real-html5-boilerplate/

ii. Add a Page, Select a Theme

To overide the default theme of your page, check out the options: http://jquerymobile.com/demos/1.2.1/docs/api/themes.html and choose between a to e.

Note the “data-theme” attribute.

<body>
    <div data-role="page" id="home" data-theme="b">
        ...content goes here...
    </div>
</body>
</pre>

<h3>iii. Add the Panel Code with Buttons</h3>
<pre>
<body>
<div data-role="page" id="home" data-theme="b">
    <div data-role="panel" id="navpanel">
        <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>
</body>

iv. Select Panel Attributes

In this case position the menu to the right side, specify a z-axis, and a theme
see: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/

    <div data-role="panel" id="navpanel" data-theme="a"
                data-display="overlay" data-position="right">
        [...]

v. Add a Menu Button

Now we need a button in our header to access the menu. Since our menu button is on the right side add a

class="ui-btn-right"

attribute. The inline CSS is to demonstrate positioning, but best to put that in your style sheet.

    <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>

Now goto your browser and test this out. You should have a working side panel menu.

Fix Panel Padding

By default the panel has a padding of 15px, the control group a margin of 10px, For the effect of buttons flush to the edge an adjustment should be made to the css:
(It doesn’t work to just drop inline definition into the panel, because these styles get dynamically added after page load.)

    <style>
        .ui-panel-inner {
            padding:0px;
        }
        .ui-controlgroup {
            margin:0;
        }
    </style>

Also, useful is to add a height to the header and a little margin on the menu button

    <style type="text/css">
        #header {
        height:54px;
        }
        #bars-button {
        margin:7px;
        }
    </style>

Here is the Full Code

<!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>

Was this content useful? Follow Nate Flink on Twitter!

About the Author

Object Partners profile.

One thought on “Adding a Sliding Menu to Your Jquery Mobile App

  1. Rajiv says:

    From what i know, this works perfectly on iOS. But fixed positions won’t work on every mobile platform.

  2. Ümit says:

    Thanks mate too beneficial!

  3. Rahul says:

    Thanks, it was great help

Leave a Reply to Anonymous Cancel reply

Your email address will not be published.