Deep Navigation with Push and Pop

As I showed in a previous post, it’s easy to create a simple back and forth navigation. That works for the simplest of situations, but what if you need deeper navigation? This is complicated since with the single document Web app approach, you’re always on the same page, moving from section to section. There is a simple way to make keeping track of where you’ve come from so you can make your way back. All you need is a dedicated JavaScript array. A JavaScript array has two very useful functions: push and pop. Consider an array like a tube into which you are going to stuff ping pong balls. One end of the tube is sealed, so you can only insert the ping pong balls through the open end. Let’s assume you’ve put all your ping pong balls into the tube and now you want to take one out. The last one in will be the first one out. That’s how arrays work. Push shoves data into an array, staking it on top of what is already there. Pop removes the last thing inserted in the array.

So, by using pushing data into an array as we navigate forward and popping items out when we navigate backwards, we can always tell what are navigation path is. Based on the example that I put together previously, we can create an array pre-populated with the home section’s id:

var navigation = ["#Home"];

Now what we’ll do is whenever the user clicks on a forward navigation element, we’ll push that into the navigation array:

$(".menuList li").click(function() {
    navigation.push($(this).attr("rel"));
});

Then, when we want to navigate back, we just need to use array.pop() to get the previous location. Since our array is navigation, we pop it first:

navigation.pop();
$(navigation[navigation.length-1]).addClass("current");

That will set the previous section as the current frame, firing off all the appropriate CSS3 transitions to bring it into view. You can see it in action here. And you can download it here.

Advertisements

About Robert Biggs
Front end Web developer skilled at creating interactive, dynamic interfaces using HTML5, CSS3, JavaScript, SVG. Passionate about developing awesome user experiences in the mobile space.

Comments are closed.

%d bloggers like this: