JQuery Mobile: is it possible to have static navigation that doesn't disappear on page transition?
With jQuery Mobile, is there a way I can have a navigation bar that spans 200px (or a percentage) to the left, that is separated from the div.ui-content? This would mean that the navigation system would remain stationary on the left, as the content is changed by swiping.
How can I customize this? I can't find any documentation on editing the content view or how to avoid going to the page for specific content!
The problem with my example code is that the href links are not linked anywhere. They just don't work. When I put them in 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 -->
source to share
You can change the CSS for the elements data-role="page"
to make room for your navbar:
.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
- 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's a demo: http://jsfiddle.net/j8nkn/2/
It's not perfect, but it should get you started.
source to share