Small Town Coder

sharing code samples for desktop, web, and mobile

jQuery Mobile Site Navigation Page

The JQuery Mobile framework is great for creating native looking mobile sites using HTML5 and javascript. In this example, I will demonstrate how to create a site navigation page triggered by a navigation button in the main page footer. If you are not familiar with jQuery Mobile, I suggest you read up on the jQuery Mobile Documentation. The example uses two seperate html files each marked up as JQuery Mobile pages. In the main page, we add a navigation bar with one button in the footer section. When the button is clicked (tapped), the menu page will load and slide up from the bottom. Here is the contents of index.htm <!DOCTYPE html> <html> <head> <title>jQuery Mobile Slide Up Menu Example</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> </head> <body> <!-- This is our main page --> <div id="page1" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation</h1> </div> <div data-role="content"> <h1>Site Navigation Example</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> <div id="page2" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation - Page 2</h1> </div> <div data-role="content"> <h1>Site Navigation Example - Page 2</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> <div id="page3" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation - Page 3</h1> </div> <div data-role="content"> <h1>Site Navigation Example - Page 3</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> <div id="page4" data-role="page"> <div data-role="header" data-position="fixed"> <h1>Site Navigation - Page 4</h1> </div> <div data-role="content"> <h1>Site Navigation Example - Page 4</h1> <p>Click on the link button in the footer to display the site navigation menu.</p> </div> <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> <ul> <li><a href="menu.htm" data-icon="arrow-u" data-transition="slideup" data-mini="true"></a></li> </ul> </div> </div> </div> </body> </html> Our menu page contains a header section and a content section. The footer section has been removed. In the header section, we include a navigation bar similar to the navigation bar in the footer of index.htm. The big difference here is that we are reversing the attributes.  The icon position is now on the bottom of the button, the icon is now a down arrow, and when clicked (tapped), we will navigate back to the previous page using a slide down transition. Here is the contents of menu.htm <!DOCTYPE html> <html> <head> <title>jQuery Mobile Slide Up Menu Example</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> </head> <body> <!-- This is our menu page that will slide up from the bottom --> <div id="menu" data-role="page" > <div data-role="header" data-position="fixed"> <h1>Site Menu</h1> <div data-role="navbar" data-iconpos="bottom"> <ul> <li><a href="#" data-icon="arrow-d" data-rel="back" data-transition="slidedown" data-mini="true"></a></li> </ul> </div> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="index.htm#page1" data-transition="slidedown">Page 1</a></li> <li><a href="index.htm#page2" data-transition="slidedown">Page 2</a></li> <li><a href="index.htm#page3" data-transition="slidedown">Page 3</a></li> <li><a href="index.htm#page4" data-transition="slidedown">Page 4</a></li> </ul> </div> </div> </body> </html> In the menu page, I have included a list view to display the menu items. The first item is a link back to index.htm. Notice how I've added the data-transition="slidedown" attribute. When this item is clicked (tapped), the index.htm will load and slide down from the top giving the appearance that our menu page is collapsing down to the bottom. Live Example I'm not sure why, but the example doesn't seem to work with the Android stock browser.