jQuery Mobile navigation bar code_jquery

A navigation bar is a set of links arranged horizontally, usually contained within a header or footer.

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

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

Copy the code The code is as follows:

• Home


• Page Two

< ;li>Search

By default, a button is as wide as its content. Use an unordered list to divide the width of the buttons evenly: 1 button takes 100% of the width, 2 buttons take 50% of the width each, 3 buttons take 33,3% of the width each, and so on. However, if you specify more than 5 buttons in the navigation bar, it will be split into multiple rows (see "More Examples").

Activate Button
When a link in the navigation bar is clicked, it will gain the appearance of being selected (pressed).

If you want to get this look when you don’t have to worry about the link, use class="ui-btn-active":

Home

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

Home