Add an amazing animation to your hamburger menu in Adobe Muse. Hamburger transitions to X symbol on click. Its a free Adobe Muse Widget. Check the table below for more details.
- Create onclick animation for your Hamburger menu.
- 26 transition for onclick animation
- Options to format the hamburger as per your need.
- Use it as a trigger for your composition widget in Adobe Muse
Muse Version :
Muse CC 2015.1 or above
Works with desktop, Tablet and Phone
- Google Chrome
- Mozilla FireFox
- Internet Explorer
- Edge Browser
Click the link below to Download the widget
Animated Hamburger Widget
Install the widget:
To install this widget in Muse double click the file you just download from the email sent by us. File Name is Animated Hamburger Widget_creativated.mulib. As soon as you double click on it It will be added to Library Panel In Muse. Library panel can be located from Windows > Library in Muse. p>
How to Use:
Once you are ready to use the widget, Drag and drop it from the library panel to your desired location on the page. This widget can be used as a trigger in most of the composition widgets in Adobe Muse.
After placing the widget open its options panel by clicking on the blue circle at the right side top of it. This is how the option panel looks.
Hamburger Slice Formatting:
In this section of the widget you get the options to format the 3 slices of the hamburger.
- Slice Length: Define the length (width ) of each slice. Default is set to 40 px.
- Slice Thickness: Define the thickness of each slice. Default is set to 4 Px.
- Slice Color: Give the slices your desired color by opening the color panel.
- Slice Corner Radius : Customize edges of the slices as per your need. Default is set to 4px.
- Slice Gap : Adjust the distance between the slices. By default difference it 10 px.
Hamburger Container Formatting:
In this section of the widget you get the options to format the container around the hamburger.
- Container Around Hamburger: This is the padding around the Hamburger slices. If you select 10 px then it will add 10 px padding around the hamburger.
- Container Color: Define the background color of the container as per your need.
- Corner Radius: Set this to define how the corners of container looks.
Transition Settings :
- Opacity On Hover: Define the Opacity value here when someone hover over the widget. set 0.1 for 10% opacity and 1 for 100% opacity.
- Hover Transition: Select any of the 26 transitions. This defines the animation from 3 slices to X symbol.
If you still have any doubt then feel free to leave a comment or send us an email on email@example.com
Option to Change the Container color on Hover added.
Animation was not happening on click. Issue was due to down css link. Link location corrected. Please make a fresh download and the animation will work on click.