Photo by Ruthie on Unsplash

Anatomy of a Cordova application navigation system (part III): the side menu

Until now we have seen how to manage our views putting them within the Bootstrap carousel: this allows us, with the help of some plugin, to swipe our fingers to switch between views. Actually we have used a standard web image slider to build our app structure and get the swiping effect.

In the second part of the article we have added a navigation top bar with some buttons in order to provide the user with an alternative way to switch between our views, which we’ve called main views.

But, as we all already know, a mobile app has tons of views and the most part are what we could call secondary views, views that reside outside of the main views’ flow and which can be accessed usually tapping buttons which trigger an action: buttons like “See details”, “Buy”, “Share” and so on. In this third part of the article we’ll see in details how to implement and use these secondary views: we’ll use them to create a side menu which gently slides in from the right side and a totally stupid fake views we’ll access tapping a button of our side menu. But before to start with the code we have to get some new tool.

Pre-requisites

The first tool we need is the library animate.css. This library, which probably mosto of you already know and use in their projects, aloows to easlily implement nice animation for any element of the DOM. For those who still don’t have this library installed in their machines, this is the download link.

Maybe we need hammer: to check if we can just use jquery.touchSwipe plugin

The side menu

The first secondary view we’re going to build is the side menu. This side menu will appear sliding in from the right when the user taps on the last button in the navigation top bar. To be honest, the side menu is only partially a secondary view, at least in the sense I use this term. As I said above, in an application we have many secondary views, but we’re likely to have only one side menu. Even if we need to build more than one side menu, they won’t go to be as many as the other views which an application can implement to perform its processes. On the other side, a side menu is not a main view because it resides outside the main views’ flow and it can’t be accessed just as another view in a ordered sequence.

That said, let’s start to see how we build the side menu in our  index.html file. This is the markup:

Quite simple, isn’t it? First we put in place a header where we place a button to close the side menu. Then we use a n unordered list to build the menu itself.

Css rules for the side menu

We also have to add an overlay to our markup in order to slightly darken underlaying view when the menu slides in. Add this line immediately after the <body> tag in your index.html:

In the index.css, we add following rule:

Go live with javascript

First of all, let’s write down the two event handlers we need to show and hide our side menu:

Nothing special here: we just prevent the default behavior of the event and then we call the appropriate function. Okay, I won’t waste your time with unhelpful discussions and I’ll show you the code for the enterMenu() method:

In the first line we set display property for the side menu to “block” and then we add 2 classes, “animated” and “slideInRight”. The first class just activates animation for our “sidemenu” div, the secon one specifies the animation type. In this case, we want the side menu slide in from the right side.

I suggest you to explore the file animated.css to discover all the animation types supported.

Then we make the overlay visible so the underlying view be slightly darkened.

After that, we use setTimeout() function to delay a bit the next command which remove the classes “animated” and “slideInRight”: this way our div will be clean and ready to be animated again when we’ll want to close it using the exitMenu() method:

Do you see? The exitMenu() function revert the div state to its original state: first add the class “animated” again and set the animation type to “slideOutRight”, so the side menu will slide out to the right, as everyone would expect it do 🙂 Then, it hides the overlay. Finally,within the setTimeout() block, the function remove the clasees for the animation and set the display property of the side menu to “none”.

If you run the application now, you’ll can see the side menu in action. In the next part of the article we’ll examine the secondary views themselves and we’ll use them to bring to life the side menu items.

Leave a Reply

Your email address will not be published. Required fields are marked *