JS Hamburger Menu (Acorn)

[letsgofishing]

The following is a very simple development of my Ultimate Xara Menu Maker applied to having a "button" have multiple actions or states.

All I have done is ensure the numbers are on top of each other and each has a link to fir up the next ( #4 has a Link of javascript: openSesame('.3'); ).

Only the starter has an extra twist. It starts off with a ClassName of Menu so it shows on page load. When it is clicked there is an action to add in Menu ( javascript: void $('.5').addClass('Menu'); openSesame('.4'); ).
Thereafter the coundown simply cycle3 5-4-3-2-1-5...

Other Objects are given the required ClassNames of a number.

In my demonstration, I have a Red Circle that does not appear on page load but does for every 5 revealed thereafter. Remove its Menu ClassName and it will show on page load as well.

JS - Multi-state Anything.xar

Acorn

Thanks Acorn - could you add "forward" and "back" buttons/icons/text/ to this?
LGF

[Acorn]

Thanks Acorn - could you add "forward" and "back" buttons/icons/text/ to this?LGF

LGF, try this.

You have 10 pictures so give them htmlclass="Menu 1" .. "Menu 10".
Create a small line of the numbers 1..10. Give each a Link of javascript: openSesame('.1'); .. javascript: openSesame('.10');
These numbers can be buttons/icons/text. They only need Links as they are always visible.

All they do is open the selected image/associated text and, potentially, left and right arrows.

The left/right arrows are trickier.
Give them Image Filenames of leftArrow and rightArrow.
Think of them as a pair associated with each image. They must share the same htmlclass as the image.
The leftArrow has a link to the preceding image number so:

• image(1) has leftArrow Link openSesame('.10'); and rightArrow has rightArrow Link openSesame('.2');
• image(2) has leftArrow Link openSesame('.1'); and rightArrow has rightArrow Link openSesame('.3');
• ...
• image(10) has leftArrow Link openSesame('.9'); and rightArrow has rightArrow Link openSesame('.1');

Stack all the left arrows together. Ditto the right arrows.

All these arrows could be replaced with a pair and a lot of JavaScript instead.

Acorn

[letsgofishing]

LGF, try this.

You have 10 pictures so give them htmlclass="Menu 1" .. "Menu 10".
Create a small line of the numbers 1..10. Give each a Link of javascript: openSesame('.1'); .. javascript: openSesame('.10');
These numbers can be buttons/icons/text. They only need Links as they are always visible.

All they do is open the selected image/associated text and, potentially, left and right arrows.

The left/right arrows are trickier.
Give them Image Filenames of leftArrow and rightArrow.
Think of them as a pair associated with each image. They must share the same htmlclass as the image.
The leftArrow has a link to the preceding image number so:

• image(1) has leftArrow Link openSesame('.10'); and rightArrow has rightArrow Link openSesame('.2');
• image(2) has leftArrow Link openSesame('.1'); and rightArrow has rightArrow Link openSesame('.3');
• ...
• image(10) has leftArrow Link openSesame('.9'); and rightArrow has rightArrow Link openSesame('.1');

Stack all the left arrows together. Ditto the right arrows.

All these arrows could be replaced with a pair and a lot of JavaScript instead.

Acorn

Many thanks Acorn - appreciated!