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

This is part 3 of our series about how to build a mobile app with WordPress and Phonegap using the JSON REST API. Here are links for part 1 and part 2.

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.)

Note: If you aren’t familiar with CSS transitions, you should be. We use javascript to add or remove a CSS class, and then the CSS tells that element how to move. You can see an example of this by looking at the CSS and javascript we added this week.

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!

7 Comments

  1. Jonathan on July 29, 2014 at 11:06 pm

    Love the blog! Is there an option to use multiple custom menus for different pages within the appresser theme? Or is the answer to this question simply just a custom menu plugin?

    Thanks for input!

    • Scott Bolinger on July 30, 2014 at 5:22 pm

      Hey Jonathan! That should be possible, although it might be a little tricky. You’d have to write a custom plugin that integrates with AppPresser, not sure if you want to do that or not. If you have any other questions, feel free to email us: http://apppresser.com/contact/

      Thanks!

  2. Deke on November 25, 2014 at 1:48 am

    Great stuff going on with this blog. Looking forward to the next installment.

    One comment / question. On subpages (Sample Page) for tablet and phone I had to remove the overflow:hidden on the app-container style. Otherwise I was not able to successfully scroll on the pages. This was also an issue on the main posts page when multiple posts were present, but for mobile phone only. After commenting out that line, it was successful for both pages on tablet and phone. This seems to break some of the css style though as it puts a bottom border in the middle of the content. Anyone else run into this scrolling issue and what have you done to solve?

  3. DON on April 7, 2015 at 11:40 pm

    Please explain more featured for easy to learn phonegap.

    • Scott Bolinger on April 8, 2015 at 11:43 am

      Hi, there is lots of information on Phonegap at phonegap.com

  4. Shaun Pritchard on May 2, 2017 at 5:50 pm

    I am an android developer and Front end web application developer. I know how to code and am considering useing appresser with phone gap but I have never used phonegap only eclipses and other IDE platforms. I want to build an app that takes and stores photos and test to a data base and is readily available in a format I can read on the app or desktop. My question is would Apppresser be a waste of time or would it save me time as compared to just developing it straight up with phonegap?

Leave a Comment





Scott Bolinger