JS Hamburger Menu (Acorn)

[Initiostar]

Pretty comfortable with the theory now, although I don't claim to know 70% of the actual code.

I can dive in and change the speed of animation, toggle and slide, slideUp, hide and fade, but that's about it.

Link to my efforts < HERE > along with Acorn's code that makes it work.

And the .web for anyone who wants edit/add/expand the page.

Attachment 127542

Thanks for sharing Chris. I had a play with your example and added a 'take-me-home' button (edition attached)



Next, I thought let's combine Acorn's ideas with the animated popup concept to extend animation through standard Xara. In the example, the link brings the selected class into view and opens a popup at the same time in a step-by-step approach.

Example attached

Then going back in the thread to the @LGF challenge and a simple NavBar, I made one with no code at all with a standard go to Top-of-Page button, where the menu is revealed by sliding in from the top. The login's are sticky so always in view whereas the additional buttons slide upwards out of view, but are brought back with the Top of Page button.

Example attached.

Thanks to you and Acorn for the ideas.

Gary

[Acorn]

Thanks for sharing Chris. I had a play with your example and added a 'take-me-home' button (edition attached)



Next, I thought let's combine Acorn's ideas with the animated popup concept to extend animation through standard Xara. In the example, the link brings the selected class into view and opens a popup at the same time in a step-by-step approach.

Example attached

Then going back in the thread to the @LGF challenge and a simple NavBar, I made one with no code at all with a standard go to Top-of-Page button, where the menu is revealed by sliding in from the top. The login's are sticky so always in view whereas the additional buttons slide upwards out of view, but are brought back with the Top of Page button.

Example attached.

Thanks to you and Acorn for the ideas.

Gary

Gary, thank you for taking these further down the line.

We probably need siran to convert javascript: void $('.cover, .step1, .step2, .step3, .step4 ').hide(0);xr_ppc("xr_xp4");xr_ppc("xr_xp5");xr_cp u(6); into a Domain Specific Language construct (akin to Xara's popup syntax).
P.S. The javascript: void $('.cover, .step1, .step2, .step3 .step4 '); part you had in earlier Steps does nothing. It need an action to perform over that collection like the hide(0) here.

In the Toggle.xar file, I added WebAmination > Click: Rotate-fade + Fast to the controls. Very satisfying.

Acorn

[Initiostar]

Gary, thank you for taking these further down the line.

We probably need siran to convert javascript: void $('.cover, .step1, .step2, .step3, .step4 ').hide(0);xr_ppc("xr_xp4");xr_ppc("xr_xp5");xr_cp u(6); into a Domain Specific Language construct (akin to Xara's popup syntax).
P.S. The javascript: void $('.cover, .step1, .step2, .step3 .step4 '); part you had in earlier Steps does nothing. It need an action to perform over that collection like the hide(0) here.

In the Toggle.xar file, I added Web Animation > Click: Rotate-fade + Fast to the controls. Very satisfying.

Acorn

Thanks for your advice Acorn. I removed the redundant code; all continued to work OK.

I added your suggestion to Chris's Toggle - slick effect.

Gary

[letsgofishing]

LGF, the somebody to help you has to be Xara!

In all versions prior to Xara Pro+v17, I can use the same construct as Xara; Link to: http://xara.com; Open link: New window, and everything works as expected. Not in Pro+.

UPDATE
The code in the Website Body (code) and the subsequent function calls need to change the function from open() to something else; I have just used openSesame(chain) and all works as it should.

Acorn

Thank you Acorn - Xara is remarkably weird some times!!!!

[letsgofishing]

Don't forget to add the 'Sesame' to your links as well.

Attachment 127541

Thanks Chris M and Acorn

[letsgofishing]

You mention thinking about a horizontal bar, that's the way I would go too.

Nice one Chris!

[letsgofishing]

LGF, the somebody to help you has to be Xara!

In all versions prior to Xara Pro+v17, I can use the same construct as Xara; Link to: http://xara.com; Open link: New window, and everything works as expected. Not in Pro+.

UPDATE
The code in the Website Body (code) and the subsequent function calls need to change the function from open() to something else; I have just used openSesame(chain) and all works as it should.

Acorn

Aaaaarrrrgggghhhh!!! Now when I click on RESOURCES I get a - Not Found - The requested URL has no content.

[letsgofishing]

OK - I have to add the sesame bit if I want the drop down menu to open - like I said - 1 forwards, 1 back...

SO does this mean that in the future, when ever I want the JS to open something, I have to add another word like this: javascript: openUp(whatever);

[Acorn]

Aaaaarrrrgggghhhh!!! Now when I click on RESOURCES I get a - Not Found - The requested URL has no content.

LGF, let's assume it's finger trouble.
My last change puts the Link as javascript: openSesame('.Ham4');

If not fingers, can you upload your file?

Acorn

[letsgofishing]

Thanks for sharing Chris. I had a play with your example and added a 'take-me-home' button (edition attached)



Next, I thought let's combine Acorn's ideas with the animated popup concept to extend animation through standard Xara. In the example, the link brings the selected class into view and opens a popup at the same time in a step-by-step approach.

Example attached

Then going back in the thread to the @LGF challenge and a simple NavBar, I made one with no code at all with a standard go to Top-of-Page button, where the menu is revealed by sliding in from the top. The login's are sticky so always in view whereas the additional buttons slide upwards out of view, but are brought back with the Top of Page button.

Example attached.

Thanks to you and Acorn for the ideas.

Gary

Hi Initiostar - thanks for all the thinking and other ideas - appreciated!