Learn how to create a Fade effect hamburger menu

Here is another way to create a mobile menu without purchasing any widgets. I am going to use the Tooltip widget to create a hamburger menu. You can find this widget inside your Widget library as it is a built in widget. Once you click on the menu icon, the elements will appear with a fade effect. When you click back, the elements will hide. Follow this steps to create your own menu:

  1. Drag the Tooltip Widget from the Widget Library to your workspace. Delete all triggers except for one and make sure they have no fill in all the states. Do the same with the target: delete the photography and delete the fill. We are going to put text frames inside the target, so you can leave the current text frame.fade-effect-tooltip-menu-widget1
  2. Add text frames to the target. These names will correspond to your pages. To create a separation bar among the pages, go to Stroke. Unlock the Weight and add just a stroke on the right side. For the icon menu I am using a Font Awesome icon. Here is a tutorial on how to use Font Awesome in Adobe Muse.fade-effect-tooltip-menu-widget2
  3. To Hyperlink the page names, click on the text frame and go to Hyperlink. Type in the URL and you are done.
  4. Open widget settings and click on Show target on click and hide target on click. You can leave the rest of the widgets options as it is or you can edit others like the transition speed.

    Watch the tutorial


Leave a Comment

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

Scroll to Top