Creating a Drop-Down Menu for Mobile Pages

This tutorial will teach you how to create and animate a hamburger menu icon and then attach an event listener through jQuery for triggering a drop-down menu.

I will be using Jade (Pug) and Sass instead of vanilla HTML and CSS. So you should at least have a basic knowledge of these templating engines.

Creating the Playground

We will start with the implementation of a simple playground. I will only be providing the Jade template along with Sass styling, since this is not the scope of the tutorial. You can take it and use it or you can come up with your own design.

Note: Here I created two mixins named flex and transition. Mixins make it easier to reuse some CSS rules by grouping them. Whenever I need to add display:flex with all vendor prefixes, I can just use +flex() instead, thanks to the mixin.

We will use this structure and build upon it for the rest of the tutorial.

Creating the Menu List

So here we used the ul tag as the parent in order to group the items with li tags as children. Moreover, in order to create an expanding background animation, we also added a div with the ID of #background.

Let's style the ul and li elements first.

ul
list-style: none
padding: 0
margin: 0

Set the list-style to none in order to remove the bullets from the ul elements and also set both padding and margin to 0 in order to remove all predefined values.

drop is for animating the opening of the menu list. The initial scaling is 30% more, and it scales back down to the original size as the transparency goes from 0 to 1. The opposite action takes place in fold.

Now we need to attach those keyframes to li elements. This part is where the Sass comes in handy.

Now we need to use this index to attach each animation to li elements with different durations.

First, consider the li.anim:nth-child(#{$i}) line.

Here we are grabbing the $ith child of the li element with class of anim.

We will be toggling this anim class. So, when it is added to li elements, the keyframe animation with the name of drop will take action. When it is removed, the fold animation will take action.

The next important thing is the duration attribute.

duration: 100ms*$i for the drop animation is extending the duration of the animation for each incrementing child number. So, when this code is compiled, the first li child will have duration: 100ms, and the last child will have duration: 600ms.

This will give the sense of animating each element one after another.

We do the same thing for the fold animation. This time, the last element should be animated faster, hence duration: 80ms*(6-$i) + 1ms. The 1ms added to the duration is due to the fact that when you set the duration to 0, some problems are likely to occur, and your animation might not work properly.

When we were styling the li element, I mentioned that we needed to use display:none in order to avoid undesired animation playing. If you don't set it to none, you will see that the fold animation plays once when the page is loaded.

If we set the display property to none, we won't see that, and then we need to show the li element before toggling the anim class.

We want our animations to play when we click the hamburger icon. So let's use some jQuery to set the display property of each li item to block and also toggle the anim class.

Conclusion

Throughout this tutorial, we practiced how to use for loops within HTML and CSS through the Jade and Sass templating engines. On top of that, we created CSS keyframe animations and attached them with different duration attributes to specific HTML elements. Then we toggled classes with jQuery to control those animations.