How to add Auto Hide to the Thumbnail Menu with Categories component

[Hopki]

Hi,
I had an e-mail request for the Thumbnail Menu with Categories to have an Auto Hide function.
This is quire logical to do but rather than answer the e-mail I thought I would share it in the forum.

First step is add the Thumbnail Menu with Categories component to your skin.

Add a timer, Timer 1, I renamed this to menu_auto_hide_timer but you can call it what you like.
Set the timers properties to:
Type: Manual
Timeout: this does not matter
Repeat: One Time

Then give the timer the following two actions:
Source: Deactivate
Action: Set Variable Value
Variable Name: category_visible
Operation: Set(=)
Value: false

Source: Deactivate
Action: Set Variable Value
Variable Name: node_visible
Operation: Set(=)
Value: false
Ok, that just about does it for the timer.

Now you need to add an action to the scroll area, category_scroller:
Source: Mouse Over
Action: Set Value
Value: 5
Target: menu_auto_hide_timer (the timer)

Now copy this action and paste it in the scroll area, node_scroller so both scroll areas have the same action.

Thats it.

How this works...
The Mouse over actions in both category_scroller and node_scroller will keep setting the timer, menu_auto_hide_timer to 5 seconds, you can change this value.
This keeps the timer running, however when your mouse pointer moves out of the menu the timer is no longer being updated so the 5 seconds will count down.
When it reaches 0, the timer is deactivated.
The timers actions set the variables to false which then hides the menu.

Please find skin attached.

Regards,
Hopki