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.
Animated Hamburger Widget for Adobe Muse
- 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
Device:
Works with desktop, Tablet and Phone
Browsers:
- Google Chrome
- Mozilla FireFox
- Safari
- Internet Explorer
- Edge Browser
- Opera
Download:
Provide a valid email address in order to receive a download link via email!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.
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.
- 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.
- 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.