Learn how to create your own customized hamburger menu with a lightbox effect using Adobe Muse built-in widgets. The only widget that we are going to use is the Lightbox Display that you will find in your Widget Library, in the Composition folder.
I will also use the text tool to format the text in the different states (Normal, Rollover, Mouse down and Active) and crete a smooth text effect. This text effect will look different depending on the type of text you want to use. If you use a System Font, Muse will export it as an image so if you want to achieve the same effect as this tutorial, I recommend using a standard font or convert your font into a web font. You can learn how to convert your fonts into web fonts here.
- Open your Widget Library and drag the Lightbox display. Delete all triggers except for one. Also, delete other elements like the black sidebars and the text below. You will just need one trigger box, the container, the target and the close button.
- Move the trigger to the top right of your website and pin it. Make sure the trigger is in the Normal state and fill it with your hamburger icon. Add color to the container (this will be the lightbox color).
- Add text frames into the target. Each text frame will correspond to a Muse page or an external page. Use your desired font and format it as you like in normal state.
- Click on rollover state and format the new behaviour of the text. I am going to increase the tracking and a transition speed. Do the same with active state.
Watch the tutorial
