Home  >  jQuery Mobile

jQuery Mobile Navigation Bar Example

September 07, 2014
jQuery mobile navigation bars typically consist of set of buttons that allow the user to navigate through application views. In Mobile application all mobile page can include navigation bar within header, footer or any place of content area. All navigation is linked by page URL. Navigation Bars can set horizontally or vertically in mobile page. To designate a navigation bar, apply the data-role="navigation" to a block level element like the HTML 5 nav element.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h1>Concretepage.com</h1>
<nav data-role="navbar">
	<a href="#" class="ui-btn-active">Home</a>
	<a href="#">About us</a>
	<a href="#">Product</a>
	<a href="#">Application</a>
	<a href="#">Contact us</a>
</nav>
</header>
<div class="content" data-role="content">
<h3>Content Area</h3>
</div>
</div>
<footer data-role="footer">
<h3>Footer</h3>
</footer>
</section>
</body>
</html>   
jQuery Mobile Navigation Bar Example

Icons in Navigation Buttons

In jQuery mobile navigation bars we can add icon by use the data-icon attribute. Mobile library provide multiple classes for set icons in button or navigation links. <a href="#anylink" data-icon="home">Home Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header">
<h1>Concretepage.com</h1>
</header>
<div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="home">Home</a></li>
        <li><a href="#" data-icon="arrow-r">Page Two</a></li>
        <li><a href="#" data-icon="search">Search</a></li>
      </ul>
    </div>
<div class="content" data-role="content">
<h3>Content Area</h3>
</div>
</div>
<footer data-role="footer">
<h3>Footer</h3>
</footer>
</section>

</body>
</html> 
jQuery Mobile Navigation Bar Example
FIND MORE TUTORILAS
comments powered by Disqus








Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us