JQuery Mobile navigation bar code

A navigation bar is a set of horizontal links, usually contained in the head or tail.

By default, links in the navigation bar automatically become buttons (no data-role="button" required).

Use the data-role="navbar" property to define the navigation bar:

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>

By default, the width of the button is the same as its content. Use an unordered list to divide the width of the buttons evenly: 1 button for 100% width, 2 buttons for 50% width,3 buttons for 33,3% width, and so on. However, if you specify more than five buttons in the navigation bar, it will be split into multiple lines (see "more instances").

The activation button
When a link in the navigation bar is clicked, it gets the appearance of being selected (pressed).

To get this look without missing links, use class="ui-btn-active" :

< Li> < A href = "# anylink" class = "UI - BTN - active >" Home< / a> < / li>

For multiple pages, you might want the selected appearance of each button to represent the page that the current user is on. To do this, add "ui-state-persist" and "ui-btn-active" to the linked class:

< Li> < A href = "# anylink" class = "UI - BTN - active UI - state - persist" > Home< / a> < / li>