Welcome to TalkGraphics.com
Page 1 of 6 123 ... LastLast
Results 1 to 10 of 55
  1. #1
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    902

    Default JS Hamburger Menu (Acorn)

    This question stems from Acorn's suggestion on this thread - https://www.talkgraphics.com/showthr...641#post626641

    I (kind of) got my head around what does what and why, in the same way a five year old can read A is for Apple. My question relates to the hover effect on the MouseOver layer.

    I made a rectangle and gave it the link javascript: open(''); so that it would close the menu. However, if I place it so the edge is central, or further, over the menu itself, it triggers the MouseOver effect. Why is that?

    Another, less important query. I'd like to look at different animations for the menu, changing SlideDown to SlideUp for instance. I did search for CSS animation but didn't get anywhere. My lack of knowing what to search for is the problem.

    Attached: Xara .web to explain the ramblings above.

    JS Hamburger.web

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,766

    Default Re: JS Hamburger Menu (Acorn)

    Chris, thank you for having a go.

    For the "reveal", I went for the simpler animations,: show,SlideDown & SlideUp, pickig slideDown.
    I set the reveal to slow and the hide to fast on purpose as it is then simpler to explain how numerical delays can be input instead; remove the quoted text so it have instant, add a number of milliSeconds to define an exact delay, or even set up a function that can be specific to any trigger event.

    You will get a MouseOver event when two elements with Links have an overlap of more than half. This is a default as to how the MouseOver layer is activated.
    Instead of cloning the Text Area to the MouseOver layer, you can use Website link colours > Mouse Over instead.

    A messier solution would be to slice out four grey rectangles; the one under the menu items would not have a close (open('')) link so would not then trigger the MouseOver rollover effect.
    Your grey box approach is not part of a typical menu design but I did say you can design and use anything!

    CSS Animations can be applied. You need to add a ClassName to an item. In Website > HTML Code (head), there would be a CSS statement for that ClassName and a pseudo element :hover. It get complicated as jQuery also has its own approach to triggers and animations. That is why I tried to abstract most away and keep the coding very simple to start off.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  3. #3
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    902

    Default Re: JS Hamburger Menu (Acorn)

    The part about how MouseOver is activated is something i never thought about before and therefore had no clue.

    The grey box was a theory I had to make it the same colour as the background and give it a transparency of 95%, then, just clicking away from the menu would close it. I find this is my first reaction when wanting to close a menu, i expect interacting with anything that isn't the menu will close it. I didn't put much thought into it, just doing stuff to see if any spark of creativity jumps forth.

    I actually did try changing slideDown to slideUp but nothing happened, I'll have a better look.

    Thank you for your input, as always.

  4. #4
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    902

    Default Re: JS Hamburger Menu (Acorn)

    Using jquery effects as search criteria found tons of stuff I don't understand and will frustrate me as i try to play with them.

  5. #5
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    902

    Default Re: JS Hamburger Menu (Acorn)

    You've created a menu monster, Acorn. I can't stop now I've started!

    Next step is to find and fiddle with different effects. Once the idea slipped into place it was easy to keep adding submenus that either replace or add onto the existing menu.

    There's a couple >HERE< to look at, and the .web file is attached below should anyone want to poke around in the engine.

    > JS Hamburger.web <

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,766

    Smile Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by Chris M View Post
    You've created a menu monster, Acorn. I can't stop now I've started!
    Next step is to find and fiddle with different effects. Once the idea slipped into place it was easy to keep adding submenus that either replace or add onto the existing menu.
    There's a couple >HERE< to look at, and the .web file is attached below should anyone want to poke around in the engine.
    > JS Hamburger.web <
    I am sorry Chris, I lied! It is more than a menu maker. It adds a large variety of animations to a site.

    It can be an accordion of Tabbed text.
    It can be a cascade of instructions.
    It can be a recipe ingredient list with tick-off options.

    It does force you to plan what calls what, but as you have discovered, that's the fun part.
    JS - Go on.xar

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

  7. #7
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    902

    Default Re: JS Hamburger Menu (Acorn)

    It's late on Sunday night. I have a busy week ahead. I'm not going to click that bouncy finger pointing at...damn it, I clicked it.

  8. #8
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    902

    Default Re: JS Hamburger Menu (Acorn)

    Luckily I'm off to bed so I won't be able to continue this game...or will I?

    >JS GOO.web<

  9. #9
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    244

    Default Re: JS Hamburger Menu (Acorn)

    @chris m. I’m going to bookmark that Chris. Thanks for your hard work.
    -W
    Bill Wood
    Expresiv Designs.
    Charity Web Design
    WD17, Designer 17. Premium packages.

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    11,766

    Default Re: JS Hamburger Menu (Acorn)

    Quote Originally Posted by bwood View Post
    @chris m. I’m going to bookmark that Chris. Thanks for your hard work.
    -W
    Bill, I could swear I am the protagonist in this creation.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPX, XWD Premium 15 & 12, XPGD10, X3D7, Xara Xtreme 5, back through time (to CC's Artworks).
    Raise software faults with MagiXara: http://support.magix.net/; if Cloud+/Pro+: https://xara.com/contact-us/

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •