Highlighted

Replicate "Hamburger" Menu Animation

Community Beginner ,
Jan 11, 2018

Copy link to clipboard

Copied

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:

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.

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

Adobe Community Professional
Correct answer by Diane Burns | Adobe Community Professional

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

Views

534

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Replicate "Hamburger" Menu Animation

Community Beginner ,
Jan 11, 2018

Copy link to clipboard

Copied

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:

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.

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

Adobe Community Professional
Correct answer by Diane Burns | Adobe Community Professional

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

Views

535

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 11, 2018 0
Adobe Community Professional ,
Jan 11, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0
Adobe Community Professional ,
Jan 11, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0
Adobe Community Professional ,
Jan 11, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0
Community Beginner ,
Jan 11, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0
Adobe Community Professional ,
Jan 11, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0
Adobe Community Professional ,
Jan 11, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 11, 2018 0
Community Beginner ,
Jan 12, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 12, 2018 0
Adobe Community Professional ,
Jan 12, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 12, 2018 1
Community Beginner ,
Jan 12, 2018

Copy link to clipboard

Copied

Haha.. I figured not

Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 12, 2018 0
Explorer ,
Jul 22, 2020

Copy link to clipboard

Copied

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

In this episode, we take a look at how to create animated hamburger menus in InDesign. This will allow you to keep your interactive presentations clean and s...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 22, 2020 0