I think Side menus are a little harder to do that a top drop menu.
Mainly because of the zones you need to move the mouse to get an action fired. The drop down menus can use a group that you will only ever cover when you need to. But a side one makes that harder.
This example users your time line to jump to different time frames that set the patten of the sub menu positions.
Each main menu item only users the mouse over action to jump to a time in the timeline for the sub menu positions that relate to it.
The Sub menus group or symbol will use the on mouse out action to jump to the timeline 00:00 time. (reset)
But this does not help if you mouse back from a Sub menus group to the main menu item that sprouted it.
As as mentioned above the main menus do not have a mouse out so for example:
[Quadro de Horarios] ︎ [ SUB MENUS]
then
[Quadro de Horarios] ︎[ SUB MENUS]
then
[Quadro de Horarios] – [ SUB MENUS]
︎
[ site ]
or
[ site ] ︎ [Quadro de Horarios] – [ SUB MENUS]
Will leave the [ SUB MENUS] still visible.
So my simple idea is to place some rects around the main menus top, left side and bottom that have the mouse out action to jump to the timeline 00:00 time. (reset).
The example attached shows that. The Rects have a border so you can see them but you would normal make them completely hidden.
I am sure there is a better way of doing this but this way is one idea
Also note that you should always use an animation path to slide your items onto and off the scene.
Just using Opaque will not disable the item and all its actions are still accessible by the user. i.e mouse over…
sideMenuDemo.hypetemplate.zip (802.1 KB)