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:
<div id="sidemenu"> <div class="sidemenu-header"> <div><a href="#" id="sidemenu-close"><i class="material-icons">cancel</i></a></div> </div> <ul class="options"> <li><a href="#" class="view_a">2 view A</a></li> <li><a href="#" class="view_b">2 view B</a></li> <li><a href="#" class="view_c">2 view C</a></li> <li><a href="#" class="view_d">2 view D</a></li> <li><a href="#" class="view_e">2 view E</a></li> </ul> </div>
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
#sidemenu{
background: #fff !important;
position: absolute;
display: none;
right: 0;
top: 0;
width: 80%;
height: 100%;
z-index: 5;
-webkit-box-shadow: -2px 0px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -2px 0px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: -2px 0px 6px 0px rgba(50, 50, 50, 0.75);
}
.sidemenu-header{
background: #689F38;
position : relative;
top : 0;
left : 0;
width : 100%;
height : 50px;
/*z-index : 4;*/
border-bottom: 6px solid transparent;
padding-top: 6px;
}
.sidemenu-header .material-icons{
font-size: 32px;
}
#sidemenu ul{
list-style-type: none;
}
#sidemenu ul li{
color: #0D6E9C;
}
#sidemenu-close{
margin-left: 10px;
color: white !important;
}
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:
<div id="overlay"></div>
In the index.css, we add following rule:
#overlay{
position: absolute;
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,.3);
z-index: 5;
}
Go live with javascript
First of all, let’s write down the two event handlers we need to show and hide our side menu:
$(document).on('click', '#sidemenu-open', function (e) {
e.preventDefault();
enterMenu();
});
$(document).on('click', '#sidemenu-close', function (e) {
e.preventDefault();
exitMenu();
});
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:
function enterMenu() {
$('#sidemenu').css({'display': 'block'}).addClass('animated slideInRight');
$('#overlay').fadeIn();
setTimeout(function () {
$('#sidemenu').removeClass('animated slideInRight');
}, 1000);
}
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:
function exitMenu() {
$('#sidemenu').addClass('animated slideOutRight');
$('#overlay').fadeOut();
setTimeout(function () {
$('#sidemenu').removeClass('animated slideOutRight').css({'display': 'none'});
}, 1000);
}
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.
Part 1 – Part 2 – Part 3 – Part 4
Hello,
Finished Part II. All working. It’s my first time using Bootstrap and touchSwipe, and I’m very impressed by the smoothness of the UI.
I have to clear something up: I had added a comment to Part II, and it got lost in translation (I think writing single Html tags in the comment caused the web-page to format the comments strangely). The final line of my comment was to explain that the selector for the nav-menu needed to have “a” appended to it as the “data-index” attribute is on the anchor inside the list-item and not the list-item itself.
I’ve now moved onto Part III but hit a block. I think there maybe a missing step as I cannot see how the side menu is wired up to the script as there appears to be a missing ‘id’…
The code for the fourth “menu” button reads:
menu
How is the code (below) supposed to trigger the side-menu?
$(document).on(‘click’, ‘#sidemenu-open’, function (e) {
e.preventDefault();
enterMenu();
});
There is no id=”sidemenu-open” defined anywhere. Is there a missing step in the tutorial that shows me where to add this? I don’t want to start coding a fix as it’ll mess up the rest of the tutorial going forward.
Could you please let me know if there is a missing step or have I completely misread this section and I’m being slightly stupid?
Many thanks,
Paul
Hi Paul. Let me take a look, please.
Okay, Paul, I apologize for my mistake. In the part 2 it is described the top bar navigation and the last menu item is the one should open the menu: this item should have the id “sidemenu-open”. I am the stupid 🙂 I have corrected the code snippet in the part 2. Sorry again…
It did it again. It doesn’t like html code in the comments. Where it displays “menu” as a link in my previous comment I had in fact pasted in the fourth UL LI in the nav-menu line, the one for the “menu” materials icon.
Great! I’m glad that was the fix as I also had added id=”sidemenu-open” into the anchor so I could continue onto the next part.
Paul.