Question

With jQuery Mobile, is there a way that I can have a navigation bar that takes up 200px (or a percentage) on the left that is separate from the .ui-content div? This would mean the navigation would stay static on the left as the content changes via swiping (transitions).

How would I go about setting this up? I can’t find any documentation on editing the content view or how to evade page transitions for certain content!.

The issue with my sample code is that the href links do not link anywhere. They simply do not work. When I put them inside data-role=”page”, then it works.

       <div id="nav">
            <ul>
                <li><a href="#one">One</a></li>
                <li><a href="#two">Two</a></li>
                <li><a href="#three">Three</a></li>
            </ul>
        </div>

        <div data-role="page" id="one" data-transition="slide">
            <div data-role="content" style="background-color:#ff0;">    
                <h1>One</h1>
            </div>
        </div><!-- /page one -->

Answer 1

You can change the CSS for the data-role="page" elements to make space for your navigation bar:

.ui-mobile [data-role="page"] {
    left : 200px !important;
    width : auto !important;
    right : 0;
}
#leftNav {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 200px;
    height   : 100%;
    z-index  : 100;
}​

#leftNav is the navigation bar element:

<div class="ui-body-a" id="leftNav">
    <a data-direction="reverse" href="#zero">Zero</a>
    <a href="#one">One</a>
</div>

Here is a demo: http://jsfiddle.net/j8nkn/2/

It’s not perfect, but this should get you started.