Animated Hamburger Widget for Adobe Muse

Animated Hamburger Widget for Adobe Muse

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
Click the button below to preview the Widget. previewinbr Inspiration from the work of Jonathan Suh https://github.com/jonsuh/hamburgers

Muse Version :

Muse CC 2015.1 or above

Device:

Works with desktop, Tablet and Phone

Browsers:

  1. Google Chrome
  2. Mozilla FireFox
  3. Safari
  4. Internet Explorer
  5. Edge Browser
  6. Opera
Note : Widget do not provide resize options of "responsive width" or "responsive width and height"

Click the link below to Download the widget

Animated Hamburger Widget

Please provide an email address where we should send the download link.

 

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. Animated Hamburger library

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.

Animate Hamburger Widget Options

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 contact@creativated.com

03/Nov/2016

Option to Change the Container color on Hover added.

17/Oct/2016

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.

2 thoughts on “Animated Hamburger Widget for Adobe Muse

  1. Hi,
    I have set up a Muse responsive site and have a mobile menu using standard hamburger icon as background image inside an accordion panel.
    I’m pretty new to this and wonder if it’s possible to incorporate your animated hambugers inside this, or do I have to set up a composition? Not sure if I can insert a menu inside composition…
    Apologies if this seems a really basic question!
    Thanks, Beccy.

    1. As label of accordion widget do not allow to drag and drop items in it, it is not possible to use hamburger widget in Accordion widget. You can use it in Composition widget only.
      Regards,
      Creativated

Leave a Reply