sliding down a curtain / venetian blind effect
- a background image slides in when the mouse rolls over a main menu item and slides back up when the whole menu area is left
- we do often see pagetext starting for space reasons right below a menu bar, very often submenues are cluttered and narrowly listed without enough margin around them, so the user get's confused/distracted by text next to and overlaid by submenues
- by letting slide down a nice background the user can focus on the menu and look relaxed through it
- ... it's a bit tricky to set up... but just think about what we want...
- first we need a “curtain” layer with a negative y value from where we want it to start to slide down
- then a cover of the violet curtain area that is above the main menu (a layer at top with bg colour of this page)
- the violet curtain shall slide in at mouseover any mainmenu item
... but shall not vanish when we leave a mainitem to look through the submenu, so this can not happen at mouseexit the mainitem nor submenu
...it should slide back only when we mouseover an area that is outside/behind the violet area: so we put a transparent gif in an invisible layer that appears at the same time as the violet curtain slides down (we apply an action to this gif later)
- now we set up two head action groups - 1 (curtaindown) and 2 (curtainup)- each triggered oncall
1.1 'move to action' to slide the violet curtain down
1.2 'show layer action' to show invisible large layer
2.1 'move to action' to slide the violet curtain back
2.2 'hide layer action' to make large layer invisible again
- the main menu items get all the actiongroup 1 (curtaindown) applied to on mouseover
- the large layer's transparent gif gets the action 2 (curtainup) applied to at mouseover
- and the top layer that acts as cover – at the top edge so you won't see the violet curtain in abvove the menu – needs this transparent gif including the action 2 as well (for the case that users leave the menuarea above the mainmenu row)
- the depth order must be like this
lowest depth 1: large layer to let the violet curtain slide up again must sit below all
depth 2:violet curtain layer
depth 3: cover layer at top
highest depth 1000: MenuMachine layer
- to make the violet curtain look like a one piece, I've cut an image and put top part as bg image into menulayer and bottom part into violet curtain layer
- as all this reads very complicated just sit and think for a moment what shall happen when. then copy/paste this page's code and analyze it for yourself.
(for demonstration only - no pagelinks added to the items)
