Make a mobile app with WordPress & Phonegap: Part 3 – Menus

At this point you should have a simple app that displays posts from WordPress in a list, and you can click those to transition to a single post view.

In part 3 of this series, we’ll add a panel menu and some static pages.

Download tutorial files

Preview of the menu and static page:

Unable to display content. Adobe Flash is required.

Menu structure

We are going to add a panel menu that opens on the left, which is a very common thing in apps.

To do this, we actually need to change the layout of the whole page just a bit. We are doing that because the menu is going to sit underneath the page, kind of like a layer. When we click to open the menu, the whole page is going to slide over to reveal the menu. The menu itself won’t move.

Let’s get into some code.

index.html

(You can click the filename above to see the code on github)

Here we added a couple of extra containers, and things are rearranged a bit. I’m not going to go over all the changes, but look over it to see what is different.

You’ll notice at the bottom that we added menu.js and fastclick.js. Menu.js takes care of the open/close animations, along with some code that was added to our CSS file. We are using CSS transitions, the javascript only handles adding and removing classes. Fastclick.js removes the 300ms delay when tapping a linked element in a mobile browser. (The delay is because it’s waiting to see if it will be a double-click.)

app.css

As mentioned above, we added some code to handle the menu transitions. Basically we are sliding the page to the right to reveal the menu, then sliding it back.

This requires a lot of absolute positioning, and for the actual transition we are using

transform: translate3D;

The translate3D property is great because it is faster than javascript animation, and uses less computing power. For simple transitions like sliding a page, it’s definitely the way to go.

You can see that we are starting off at

transform: translate3D(0, 0, 0);

and moving to

transform: translateX(75%);

That moves the page 75% of the screen width to the right, revealing the menu that is underneath it on the left.

app.js

In app.js we had to change our hash routing a bit to account for adding different types of pages to the menu.

We want to be able to add a static page, I named it samplePage. You’ll notice in app.route() that we changed up the if statement a little bit:

var samplePage = 
	'<div><article class="static-page">' +
	'<a class="topcoat-button" href="#">Back</a>' +
	'<p>Static Page Content</p>' +
	'<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>' +
	'</article></div>';

/* If the hash is sample, show the samplePage. If it's anything else, load the singlePost view, otherwise it's the homePage */

if (hash == 'sample') {
	page = samplePage;
} else if (hash != '') {
	page = singlePost;
	app.getSinglePost(hash);
} else {
	console.log('home page');
	page = homePage;
	app.init();
}

We defined our samplePage content, then load it if the link hash is #sample. In index.html, the code for that looks like this:

<a href="#sample">Static Page</a>

You could easily repeat that to make another page by duplicating the code we added for samplePage.

Conclusion

Our app is starting to take shape!

You should now have a fully functioning app that pulls a custom post type from WordPress, changes pages with nice transitions, and uses a side panel menu.

You can add more static pages to fill out the app, and even compile it using Phonegap to get ready to submit to the app stores.

If you enjoyed this tutorial, let me know in the comments!