Mega menus

Dravium shared this question 6 years ago
Answered

What is the best technique for creating mega menus? (Such as the ones seen here: http://www.tableausoftware.com// - mouseOver Products). Is there a widget for this?

Comments (7)

photo
1

You can draw a dynamic panel, that would be the 'sub menu' and then draw all the links in it. Then mark the panel as hidden using the properties panel. Next add an 'on mouse enter' event to the menu item so that it shows the dynamic panel. Finally add an 'on mouse leave' event on the dynamic panel that makes it hide again.

photo
1

Victor, your instructions make perfect sense in theory, but I can't get it to work. The dynamic panel always disappears when I mouse off the main menu item. I've tried many combinations of hide/show interactions on different elements, but nothing seems to work. Not sure what I'm doing wrong.

photo
1

Also, if I build this into a template, I can't seem to get the menu to show over the page content. Not sure why it's different than regular menu items?

photo
1

Sorry for multiple posts in a row. I've got it partially working, but it's still not as effective as the standard menu widgets. It needs to behave just like those. E.G.:


MouseEnter on menu item shows sub-menu


MouseLeave on menu item hides sub-menu if mouse is not over sub-menu


if mouse is over sub-menu, sub-menu does not hide


MouseLeave on sub-menu hides sub-menu


Sub-menu needs to show over page content, not behind it


Thanks in advance for any ideas!

photo
1

And what are the things they are not working? I presume this one "Sub-menu needs to show over page content, not behind it". The content that is placed in a template always appear below the content in the screen, so does your menu. I suggest you to move that menu in a master and then place the master in each screen, above all the content.

photo
1

OK, back at this and things are coming together, but I've got 2 new obstacles:


1. I've set the dynamic panel to hide On Mouse Leave for the panel. I also need it to hide On Mouse Leave for the menu item, putting that interaction on the menu item makes it hide when trying to interact w/ the dynamic panel.


2. I've got icons (inserted PNG graphics) next to my menu items - they look great in the simulation, but shift by ~20-40 pixels when I publish. I've tried grouping/ungrouping, moving the graphics into the same group w/ the menu items and toggled the absolute/relative position button.


I love Justinmind for the most part, but I've spent far more time troubleshooting mega menus on this project than I have producing an effective prototype.

photo
1

Could you send the prototype to jim.support at justinmind.com? We will try to fix it for you.