Building a Mobile Panel with jQuery Mobile

In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated to accommodate this screen limit. Commonly, there is a button at the right or left, which will reveal hidden elements when it is tapped.

Take the Facebook app for iOS as an example; if you tap the icon on the left side, it reveals the link menus to navigate the app, while if you tap the icon on the right side, it will reveal your online contacts. Most of today’s apps apply a similar approach.

jQuery Mobile is a framework that is specifically designed to build user interface and interaction for mobile devices – like iOS, Android, Windows Phone, Blackberry and Symbian. In the context of our discussion, it provides a component called Panel Slide to build that function in a much easier way.

jQuery Mobile provides three methods to show the panel namely reveal, push, and overlay; these methods are specified with data-display attribute.

reveal will show the panel by sliding the content page. It is the default method applied if the attribute is not specified explicitly. The push method will display the panel by sliding both the panel and the content at the same time, while the overlay method will show the panel at the top of the page content.

CSS and Theme

As we have linked the jQuery Mobile stylesheet, our page has also been styled up without the need of additional style rules.

You can apply the themes that are provided using data-theme attribute. But, in this example, we will just leave the header style as shown in the above screenshot, then style the page and the panels on our own. Here are our style rules.

Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.

We're Social

Our Partners

Disclaimer: The editor(s) reserve the right to edit any comments that are found to be abusive, offensive, contain profanity, serves as spam, is largely self-promotional, or displaying attempts to harbour irrelevant text links for any purpose.