Advanced: Creating Slide Out Menu 

In this tutorial we will show you how to create a Slide Out Menu with Zoom in Menu Items using Advanced CSS Animator

*You can also check out the video.

How to do it

1. We've created an absolute positioned DIV just below the top side. We've also added some images as menu items inside it.

2. First of all we need the div, containing our menu items to be pinned up to the top of the page. Click the Tag Inspector icon 

3. Click the Add behavior button  and select the Advanced CSS Animator menu item 

4. The Advanced CSS Animator dialog opens. Select the dropdown menu  and the ID of the div container

5. Select TranslateY item in the CSS Transforms Menu   and add the translation

6. Enter 0 in the From: field, enter the target coordinates of the translation and click the Advanced button.

7. Use the following settings

8. We leave the default Animation settings and click the OK button
   
   

9. Make sure to select onLoad event for this animation. Now, when the page loads our div container with menu items will slide up to the top of the page.

10. We do the same with the arrow icon  that is located within the div, but instead of translation we use rotation effect, so it will rotate when the div container slides up.

11. Here are the settings for the arrow icon animation and click the OK button when you are done

12. We are going to make the div container slide down onMouseEnter and slide back up onMouseLeave. Select the div containing your menu items and click on the Tag Inspector Icon
    
    

13. Click the Add behavior button and select the Advanced CSS Animator menu item

14. The Advanced CSS Animator dialog opens. Select the combo box  and choose the ID of the div container

15. Add TranslateY effect, leave the From: field empty and enter 0 as target position for the translation

16. Select an Easing effect  and click the Advanced button
    
    

17. Use the following settings and click the OK button
    
    

18. Make sure you select onMouseEnter event
    
    

19. We do the same with the arrow icon, but instead of translation select rotation effect. Here are the rotation settings:
    
    

20. We've just set up the div to slide down and the Arrow Icon to rotate onMouseEnter. In order for menu to slide back up after the mouse leaves the div, we create two onMouseLeave events. The first one is for sliding div up, and the second one is for rotating the arrow icon in opposite direction

21. Here are the settings needed for sliding the div back up. When you're done click the OK button

22. These are the settings needed for rotating the arrow
    
    

23. Make sure to select onMouseOut event for both of these animations
    
    

24. We are now going to set up the menu items to zoom in onMouseOver and zoom out to normal size onMouseOut. Click on the first icon
    
    
25. Click on the Tag Inspector icon , the Add behavior button and select the DMXzone menu item
    
    

26. Add the ScaleX effect , leave the From: field blank, enter 1.3 in To: field and 400 as duration.
    
    

27. Select the OutElasticeasing  and add ScaleY effect using the same settings.
    
    

28. Make sure to select onMouseOver event

29. We are now going to add an onMouseOut event which will zoom the menu items to their default size. Click the Add behavior button  and select the Advanced CSS Animator menu item
    
    

30. Add ScaleX and ScaleY effects with the settings shown on the screenshot
    
    

31. You can now save your work and preview the result in your browser. That's how you can create a Slide Out Menu with Zoom in Menu Items