Replicate "Hamburger" Menu Animation

[joboston617]

I am using InDesign to create a Publish Online "brochure", and I would like to replicate a Hamburger Menu for my navigation as seen in the following:

• Example on slide 8 here: https://indd.adobe.com/view/1b977dce-38b5-486f-ad27-58b857edc30c

I've managed to create the hamburger button (three lines) that when clicked triggers a rectangle with nav links to slide in from the left (shows the navigation), and I've created the close button (circle with a X) that when clicked will slide the rectangle with nav links to the right (hides the navigation).

However, the close button displays on top of the hamburger menu at the same time. I am also not using MSOs, so this may be a factor.

I found a tutorial that is very similar to what I want, but the hamburger menu icon/button doesn't get replaced with a close button.

• Tutorial: InDesign CC Interactive Menu for an ePub - YouTube

If someone could point me in the right direction, that would be super helpful. I'm pretty new to using InDesign Animations.

[JonathanArias]

it works fine for me... nice brochure. i am down in Mobile.

[Laubender]

Hi,
works for me as well.

But that means not much, because I only did a test with one browser on a single machine:
Firefox 57.0.4 on Mac OS X 10.11.6.

So the question is:
What's your device and bowser you are seeing the issues?
And perhaps: Is your internet speedy enough for loading and unloading all that stuff?

( Nice bochure, indeed… )

Regards,
Uwe

[JonathanArias]

my test was on the latest version of Chrome mac also 10.12

[joboston617]

That link is an example of the type of menu that I am looking to replicate, not my brochure.

I apologize for not making that clearer.

It is indeed a nice brochure Laubender

[Diane Burns]

When creating this type of menu, I often use Show/Hide buttons.

As part of the set up for the close button, add a Show/Hide action that hides it.

I'll work up a little example and post in a bit.

[Diane Burns · Accepted solution]

This simple file mimics what the Auburn View Book page menu does. If you like, I can message the file.

https://indd.adobe.com/view/207271a2-723d-4acf-b94a-983af73a052e

[joboston617]

That's perfect, Diane!

I would really appreciate if you would message it to me. Do I put my email address in this forum?

Your InDesign Animation Lynda.com courses are great. They've helped me quite a bit.

[Laubender]

joboston617  wrote

… Do I put my email address in this forum?

Never do this!

Just send the address by personal message.

Hover over Diane's name in the head of a post and click "Message".

Regards,
Uwe

[joboston617]

Haha.. I figured not

Thanks!

[BezierKid]

I posted a how-to video on this topic that might help anyone on the thread. https://youtu.be/5R7HnpL8idE