Day 56 – Menu effects!

After creating a pretty static blog page, I wanted to learn how to create a slide in menu. I found this great demo of different menu transitions on codrops. What do you do when you have no clue where to start? You start by imitating. Don’t reinvent the wheel.

Initially I had a single menu div and applied a “starting position” class to it on effect button click. The trouble was, I had to set a small delay so that the starting and final position classes would not be applied at the same time by JavaScript. There would have to be a delay and transition when the classes were removed as well. (Or else the menu would just vanish instead of sliding back out). This was the first time I really used the transition property and I definitely struggled with setting up the code!

The more simple way was to just have a menu set up for every effect. Apply a css class to move that menu into the correct starting position (for example: for Slide in, you push the menu 100% of its width to the left). Then when the button is clicked, you add a class for the final position. The final position of the menu was always the same for my effects, right on the left of the screen. By adding transition timing to the classes, the menu would slide in from the left and then slide back out.

menu-effects

Once I had the setup figured out, creating different effects was much easier. I just had to create different classes for each of the effects: one menu closed class and one menu open position class for the main div if needed (for example if the menu pushes the main div to the right).

In this effect (Forward and back), the main div is scaled down when the menu is open.

main-final
I used JavaScript to open the effect button clicked, and then close the menu upon another click anywhere on the page. This ensures that two different effect menus are never shown at the same time.

This page was another one of those “this seems easy, why is it so frustrating” pages in the beginning but now I know how to create a slide in menu!

Day 56 – Menu Effects

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s