{"id":13961,"date":"2012-06-14T21:01:01","date_gmt":"2012-06-14T13:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=13961"},"modified":"2025-04-04T01:06:54","modified_gmt":"2025-04-03T17:06:54","slug":"building-mobile-app-navigation-with-jquery","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/building-mobile-app-navigation-with-jquery\/","title":{"rendered":"Building Efficient Mobile Navigation with jQuery"},"content":{"rendered":"

Smartphones<\/a> now come with highly efficient web browsers. JavaScript has become more powerful than ever and can be extended with the help of code libraries like jQuery. Combined with the latest HTML5\/CSS3<\/a> specifications, it\u2019s possible to build fast and responsive mobile web apps with basic frontend code.<\/p>\n

In this tutorial, I\u2019ll show you how to build a mobile-based<\/a> website or web app<\/a>. We\u2019ll use CSS3 media queries to target specific devices and screen resolutions. Additionally, we\u2019ll use a bit of jQuery<\/a> to animate the menu and load external page content using Ajax calls. Even better, the layout can expand to display correctly in regular desktop browsers such as Chrome or Firefox.<\/p>\n

<\/i> View demo <\/span><\/a>\n<\/i> Download source<\/span><\/a><\/p>\n

Defining the Page Structure<\/h2>\n

Let\u2019s start by reviewing the HTML page structure and applying some CSS rules. We\u2019ll skip most of the unusual meta tags in the header since they don\u2019t directly affect the web app. However, the following meta tags are important:<\/p>\n

\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1\">\r\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\r\n<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">\r\n<\/pre>\n
The X-UA-Compatible<\/strong> tag describes how your document should render in certain browsers. It\u2019s particularly interesting when coding in HTML5<\/a>, though not essential to worry about too much here. However, the meta viewport<\/strong> tag is crucial. It sets the mobile browser window to 100% instead of the default zoomed effect.<\/p>\n
You can also disable user zoom with the content value user-scalable=no<\/code>. In this case, we just want to set the full-screen width to match the device width. The Apple web app tags enable the website to be saved as a home screen icon on iPhones or iPod Touches. While not necessary, it\u2019s a useful feature to have.<\/p>\n
Inner Body Content<\/h3>\n
Inside the body tag, I\u2019ve set up a wrapper div with the ID #w<\/code>. Within this wrapper, I\u2019ve divided the layout into two more divs with IDs #pagebody<\/code> and #navmenu<\/code>. The entire page width is limited to 640px to ensure the layout scales consistently.<\/p>\n
\r\n<div id=\"pagebody\">\r\n    <header id=\"toolbarnav\">\r\n        <a href=\"#navmenu\" id=\"menu-btn\"><\/a>\r\n        <h1>HK Mobile<\/h1>\r\n    <\/header>\r\n\r\n    <section id=\"content\" class=\"clearfix\">\r\n        <h2>Welcome to the Mobile Site!<\/h2>\r\n    <\/section>\r\n<\/div>\r\n\r\n<div id=\"navmenu\">\r\n    <header>\r\n        <h1>Menu Links<\/h1>\r\n    <\/header>\r\n\r\n    <ul>\r\n        <li><a href=\"#homepage.html\" class=\"navlink\">Home<\/a><\/li>\r\n        <li><a href=\"#about.html\" class=\"navlink\">About Us<\/a><\/li>\r\n        <li><a href=\"#advertise.html\" class=\"navlink\">Advertise<\/a><\/li>\r\n        <li><a href=\"#write.html\" class=\"navlink\">Write for Us<\/a><\/li>\r\n        <li><a href=\"#contacts.html\" class=\"navlink\">Contacts<\/a><\/li>\r\n        <li><a href=\"#privacy.html\" class=\"navlink\">Privacy Policy<\/a><\/li>\r\n    <\/ul>\r\n<\/div>\r\n<\/pre>\n
\r\n#w #navmenu {\r\n    background: #475566;\r\n    height: 100%;\r\n    display: block;\r\n    position: fixed;\r\n    width: 300px;\r\n    left: 0px;\r\n    top: 0px;\r\n    z-index: 0;\r\n}\r\n<\/pre>\n
This top segment defines styles for both sections of the page. Our nav menu is only 300px wide, leaving some room for the page content to still be visible. The open\/close menu button is located directly on the left side and is always accessible. The important piece here is the z-index property value and using position: fixed;<\/code> on our nav menu.<\/p>\n
The top toolbar header is also an interesting section. It is set to a fixed position so it will scroll with the page content. This replicates a similar effect as you\u2019d find in any iOS app title bar.<\/p>\n
\r\n\/** @group header **\/\r\n#w #pagebody header#toolbarnav { \r\n    display: block; \r\n    position: fixed; \r\n    left: 0px; \r\n    top: 0px; \r\n    z-index: 9999; \r\n    background: #0b1851 url('img\/tabbar-solid-bg.png') top left no-repeat; \r\n    border-radius: 5px; \r\n    -moz-border-radius: 5px; \r\n    -webkit-border-radius: 5px; \r\n    -o-border-radius: 5px; \r\n    border-bottom-right-radius: 0; \r\n    -moz-border-radius-bottomright: 0; \r\n    -webkit-border-bottom-right-radius: 0; \r\n    border-bottom-left-radius: 0;\r\n}\r\n<\/pre>\n
The navigation menu is given a lower z-index value so that #pagebody<\/code> is always on top. This is crucial since the JavaScript code will slide the page body a certain number of pixels to reveal the navigation underneath.<\/p>\n
I\u2019ve used a hash symbol (#) in front of each .html page to stop some poor behavior in Mobile Safari. Whenever you click a link, the URL bar appears and pushes down the content. But when referencing an ID, nothing is reloaded except through JavaScript calls.<\/p>\n
CSS Positioning<\/h2>\n
There isn\u2019t much confusing content in our CSS code. Most of the positioning is done manually and then manipulated through jQuery. However, there are a few interesting pieces in our document.<\/p>\n
\r\n\/** @group core body **\/\r\n#w #pagebody {\r\n    -moz-border-radius-bottomleft: 0; \r\n    -webkit-border-bottom-left-radius: 0; \r\n    height: 44px; \r\n    width: 100%; \r\n    max-width: 640px;\r\n}\r\n\r\n#w #pagebody header#toolbarnav h1 { \r\n    text-align: center; \r\n    padding-top: 10px; \r\n    padding-right: 40px; \r\n    color: #e6e8f2; \r\n    font-weight: bold; \r\n    font-size: 2.1em; \r\n    text-shadow: 1px 1px 0px #313131;\r\n}\r\n<\/pre>\n
Mobile Rules<\/h3>\n
It\u2019s easy to notice that I\u2019m also using a background image for the blue header bar texture. This image is sized at 640\u00d744 pixels to maintain the consistent layout structure. Additionally, I\u2019ve created an image @2x for iPhone\/iPad retina displays. You can see both images below or grab them from my demo source code:<\/p>\n