animated Hamburger icon

Discussion in 'General Muse' started by AaronR, Feb 10, 2016.

  1. AaronR

    AaronR Member

    17
    1
  2. Norman Durkee

    Norman Durkee Well-Known Member Moderator

    272
    45
    Hey @AaronR , great question and awesome animated menus! I like those alot. That is an excellent question, one that @Alex Wiley I believe would be the man to best answer this for you!
     
  3. Mike Valkanet

    Mike Valkanet Well-Known Member

    79
    13
    Only speaking about Edge Animate:
    Yes but there's some limits depending on what you want to do.

    I use Edge Animate for my animations. This program is eventually supposed to be replace by the new "Animate" which is really Flash Professional. Using Edge you can make a whole menu that acts like an accordion widget, but it will act like an invisible iframe covering up any clickable items underneath it even when the menu is not activated in the down state. So this can work fine unless you want to pin the menu to top, because then it would block you from clicking other links on the site.

    Use Edge to make activating buttons in the top of an accordion widget doesn't work, but I have had menu items that work in the bottom part of an accordion widget. But the start playing when 1st opened so you basically should have them loop.

    See my phone number in my mobile menu.
    http://expresswebstudio.com
    It's nothing more than an animation below the menu buttons.
     
  4. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    AaronR, those are interesting animations, and I wouldn't be surprised if the code could be injected into Muse.
    One thing that isn't getting a lot of play in this new version of Muse is the handling of SVG's.
    I've found it a lot easier to insert them as background images which allow some pretty nice looking state transitions. That would come close without a lot of code or animation needed.
    Just a thought, especially with using either the new transitions in Muse and/or out State transition widget. You may not as easily achieve that exact look, but going from the Hamburger to the close X is an easy thing now.
    Dj
     
    Jörgen likes this.
  5. AaronR

    AaronR Member

    17
    1
    DJHerold, If i was going to inject the code into Muse do you think i would have to place all the code into one html doc using inline styling and scripting? Or is there a way to attach additional CSS stylesheets and scripting to the muse document?
     
  6. AaronR

    AaronR Member

    17
    1
    Also
    Thank you Mike and Norman for helping me on this subject I greatly appreciate all of your solutions
     
  7. Alex Wiley

    Alex Wiley Product Specialist / Widget Development Staff Member Advisory Group

    164
    51
    Hey @AaronR,

    It is actually very possible to implement this into Muse, in-fact i've gone ahead and pretty much done it for you! Check it out here: http://alex-hamburger.businesscatalyst.com/

    The only problem is actually getting that code to work in Muse. If you were to try and insert this by copying and pasting the code in, using the appropriate tags; you would see all of the buttons show up, but they wouldn't animate. This is because Muse can have a little bit of difficulty loading in the jQuery shown in the codepen site.

    This took a little workaround from me and I ended up creating a little widget which can import the jQuery for you. Let me work on this a little more and see if I can get anything solid put together... but this is very, very possible.

    Thanks,
    Alex

    @Norman Durkee, @Mike Valkanet , @DjHerold
     
    ALXDEE, calipimousse, ALW08 and 2 others like this.
  8. AaronR

    AaronR Member

    17
    1
    Oh WOW! thank you so so much. it's little details like this on a website that really give a website that extra umph in impressiveness.

    Being able to use this in muse as a button is going to be awesome!
     
    ALW08 likes this.
  9. AaronR

    AaronR Member

    17
    1
    @Alex Wiley

    Did you ever figure out a solid widget for those hamburger icons?
     
  10. nancy sheridan

    nancy sheridan Member

    13
    1
    @Alex Wiley @AaronR

    I love these hamburger menu icons!! Is there some widget that i can use for this?!

    Thanks!
     
  11. Mike Valkanet

    Mike Valkanet Well-Known Member

    79
    13
    The Accordian widget that comes stock with Muse is the basic way.

    Muse Themes just released their new widget for off screen hamburger menus.
     
  12. AaronR

    AaronR Member

    17
    1
    @nancy sheridan

    So far there isn't a widget for those exact icons, however the widgets that mike mentioned do have hamburger icons in them... they just dont animate
     
  13. nancy sheridan

    nancy sheridan Member

    13
    1
    @Alex Wiley @AaronR

    It was the animation i was drawn to really!

    I've found it hard to find a menu with the hamburger menu that animates in to a X instead of having to place a closing X somewhere else!
     
  14. AaronR

    AaronR Member

    17
    1
    I agree

    I too am in the market for a widget that will give me a hamburger menu that animates in to a X instead of having to place a closing X somewhere else

    the struggle is real
     
  15. nancy sheridan

    nancy sheridan Member

    13
    1
    Ha! Totes...

    It's the little nuances with Muse that get me.

    Maybe we should all club together to get it commissioned!
     
  16. AaronR

    AaronR Member

    17
    1
    where do i sign lol
     
  17. DjHerold

    DjHerold Moderator Staff Member Advisory Group

    3,459
    255
    All, let me talk to Alex and see if there has been any movement.
    Dj
     
  18. GemBro

    GemBro Member

    6
    1
    What about using transparent animated 'hamburger menu' GIFs ... say one GIF for hover and one GIF for mouse down? ... colour code them using 'colour overlay' in the layers within Photoshop ... might be easier to implement with, rather than using code as such? ...
     
  19. AR(t)BITER

    AR(t)BITER New Member

    1
    0
    I also would love an animated hamburger icon widget. In fact, Muse-Themes already has integrated such a thing in the Versa Slide menu. The hamburger icon animates into an arrow there. It really would be great if such a thing would come as a widget of its own.
     
  20. ALXDEE

    ALXDEE New Member

    1
    0
    Amazing! Would it be possible to have the MUSE file of this please.
     

Share This Page