Filters & Transitions

[Googolplex]

I cannot figure out how to implement the different effects (gradientwipe etc.) in my menues. Could someone give me an example please?

[kevin3442]

Hi Googolplex,

There are many different types of effect filters that you can apply. You'll find examples of various effects and the code that you need to generate them on this example page of milonic.com. To use that page, select the effect you want from the menu on the left, then fill out the form in the resulting menu to set the parameters of the effect. Not only will the effect be applied to the menus on the page, but the code used for the effect will appear in the textarea field on the page (you can copy it from there and paste it into your own menus).

The effect is specified for each individual menu, in the 10th element of the menu array. There are two ways you can apply an effect. (1) You can specify the effect by including the effect's code directly in the 10th element of the menu array, inside double quotes, as many of the examples on the Milonic site do. (2) You can place the effect's code inside a string variable in the menu_array.js file, and use that variable name as the 10th element in the menu array for the menu you want to apply the effect to. These variables should be set in the .js file before the menu arrays are defined. I prefer the second method, because you can define an effect in one variable, then easily apply that effect to multiple menus. Then, if you later decide to change the effect, you have only to edit the variable, rather than editing every menu array containing that effect.

For examle, I use two different effects; one for my second level menus (drop-down from the main menu) and one for my third-level menus (cascading out from the drop-downs). I define my effects like so:

Code: Select all

effect_PullDown = "pixelate(squares=50, duration=0.6);Shadow(color='#202020', Direction=135, Strength=4)"
effect_Cascade = "Shadow(color='#202020', Direction=135, Strength=5)"

I place these variable settings in my menu_array.js file, just above the style array definitions. Note that you can combine multiple dhtml effects by separating them with a semicolon, as in effect_PullDown above.

Now... how to use the variables. Here's what a menu array for one of my drop-down (second-level) menus would look like... not a real menu, just an example:

Code: Select all

addmenu(menu=["menu1",,,130,2,"",style_PullDown,,"left",effect_PullDown,,,,,,,,,,,,
  ,"item1","item1.htm",,,1
  ,"item2","item2.htm",,,1
  ,"item3","show-menu=menu2",,,1
])

Notice that the 10th element of the above array is set to effect_PullDown. So, when menu1 is opened, it will produce the effect defined in effect_PullDown above (plixelation with a drop shadow). Notice that item3 in menu1 will open a submenu called menu2. This would be a "cascading" menu. Its menu array would look something like this:

Code: Select all

addmenu(menu=["menu2",,,100,1,"",style_Cascade,,"left",effect_Cascade,,,,,,,,,,,,
  ,"item1","item1.htm",,,1
  ,"item2","item2.htm",,,1
])

Notice that the 10th element of menu2 is set to effect_Cascade. So, when menu2 is opened (e.g., by pointing at item3 in menu1), it will produce the effect defined in effect_Cascade above (no pixelation, but a drop shadow the same color as that used for drop-down menus,with a slightly greater depth).

I apply effect_PullDown to all of my second-level menus and I apply effect_Cascade to all third-level and beyond menus (all the cascading ones). If I ever want to change the effect of the pull down menus, I only have to edit the effect_PullDown variable, rather than editing all of the menu arrays themselves.

Hope that made sense. Good luck!

Kevin

[Googolplex]

Not only did it make sense, everything works perfectly now. THANKS :mrgreen: