Highlighted

Hello, did anyone manage to fake a flyover of a mega menu in the header?

New Here ,
May 15, 2020

Copy link to clipboard

Copied

I've tried inlaying in an artboard or in animation by duplicating the artboard but I always have an action to add in addition to the hovering... If anyone can help me out, that'd be great! Thank you.

Correct answer by neosenate | Community Beginner

Hi yes it's possible. I've got something similar to that working but in a vertical menu. What I did was the following -

 

Each item in the top-level menu has to be it's own component. Each component will include the mega-menu.

 

You have to make each component have a default state and a hover state. In the default state, you have to hide the mega menu by using the eye icon on the layer. Then in the hover state, you show the layer.

 

neosenate_0-1589795343966.pngneosenate_1-1589795368670.png

I've done this by using the hover state, but you can also do it with other states. For example if you wanted the user to click on the menu to open it rather than hovering over it.

 

Hope that helps.

 

Topics

How to

Views

714

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

Hello, did anyone manage to fake a flyover of a mega menu in the header?

New Here ,
May 15, 2020

Copy link to clipboard

Copied

I've tried inlaying in an artboard or in animation by duplicating the artboard but I always have an action to add in addition to the hovering... If anyone can help me out, that'd be great! Thank you.

Correct answer by neosenate | Community Beginner

Hi yes it's possible. I've got something similar to that working but in a vertical menu. What I did was the following -

 

Each item in the top-level menu has to be it's own component. Each component will include the mega-menu.

 

You have to make each component have a default state and a hover state. In the default state, you have to hide the mega menu by using the eye icon on the layer. Then in the hover state, you show the layer.

 

neosenate_0-1589795343966.pngneosenate_1-1589795368670.png

I've done this by using the hover state, but you can also do it with other states. For example if you wanted the user to click on the menu to open it rather than hovering over it.

 

Hope that helps.

 

Topics

How to

Views

715

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
Adobe Community Professional ,
May 17, 2020

Copy link to clipboard

Copied

Please describe your goal in with more details. Did you try to add interaction to animated artboard? Am I right?

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...
Adobe Community Professional ,
May 17, 2020

Copy link to clipboard

Copied

I don't understand this part: "but I always have an action to add in addition to the hovering". 

Maybe you can explain a bit more what kind of interaction you do and don't want or need. And an image also often helps...

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...
New Here ,
May 18, 2020

Copy link to clipboard

Copied

Hello and Thanks to both of you ! Maybe this picture could help...overlay megamenu.png

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...
Community Beginner ,
May 18, 2020

Copy link to clipboard

Copied

Hi yes it's possible. I've got something similar to that working but in a vertical menu. What I did was the following -

 

Each item in the top-level menu has to be it's own component. Each component will include the mega-menu.

 

You have to make each component have a default state and a hover state. In the default state, you have to hide the mega menu by using the eye icon on the layer. Then in the hover state, you show the layer.

 

neosenate_0-1589795343966.pngneosenate_1-1589795368670.png

I've done this by using the hover state, but you can also do it with other states. For example if you wanted the user to click on the menu to open it rather than hovering over it.

 

Hope that helps.

 

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...
Adobe Community Professional ,
May 18, 2020

Copy link to clipboard

Copied

Yes this is the way that you can do that. Thanks for informing us. I will mark it as correct answer..

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...