Overview

• Introduction
• Predefined Effects
  • Fading Effect
  • Sliding Effect

Introduction

In JSCookMenu 2.0, special effect hooks are provided for developers to produce visually appealing special effects on displaying/hiding sub menus.

The usual steps adding a special effect for an existing theme (some theme may have the special effect already), is to set its theme property effect value to an effect instance factory (if you are not that technical, just follow the examples below).

<script language="JavaScript" type="text/javascript"><!--
// make a copy of the theme properties so that only the following menu
// is displayed using the special effect.
var prop = cmClone (cmThemeOffice2003);
// indicate that this property has sliding effect.  8 is the speed of
// the sliding.
prop.effect = new CMSlidingEffect (8);
// draw the menu as usual.
cmDraw ('demo2', demoMenu, 'hbr', prop);
--></script>

Then make a copy of your existing theme properties if you just want to enable the effect for the particular menu. Lastly, install the appropriate visual effect.

I will write in detail on how to create your own effects later. Meanwhile, you can enjoy the pre-defined visual effects.

Pre-defined Special Effects

For pre-defined special effects, effect.js needs to be included. The path on your server may be different.

<script type="text/javascript" src="/JSCookMenu/effect.js"></script>

Fading Effect

I think that Sliding and Fading effects cover probably 99% of demands of special effects. There could be potentially sound effect, but 1) it can easily get annoying and 2) I do not have any sound files to play with.

The following effects can be applied to most existing themes, but browser support varies.

• Opera. 7.2 has buggy opacity support, but it works well on version 9.0.
• Firefox. Works well on 1.5.
• IE. This effect on IE 6 can display over select boxes, flashes, and iframes. However, since the current method for IE 5.5+ to show opacity layer involves an ActiveX control, it will not work for some security settings.
• Safari. Works well on the latest.

To add this effect to your theme, do like the following:

// prop is the theme property.  30 is the showing speed, 80 is the hiding speed.
prop.effect = new CMFadingEffect (30, 80);

The valid fading speed value is between 10 and 100.

Sliding Effect

This effect can be applied to any existing themes, but some themes may have visual defects. There are also some browser issues.

• Opera. 7.2 has buggy clipping support, but it works okay on 9.0 for certain themes. Opera 9.0's clipping method is still flawed in that the hidden region can still affect the mouse hover, thus triggering an unncessary mouseOut event that hides the menu. Some themes seem to be not affected. You will just have to test it out. My feeling is that if an image background is used in sub menu, chance is high that it would not work. Alternatively, you can set the menu hiding delay after mouse out to a slightly bigger value so it is not so noticeable.
• Firefox. On 1.5, this effect can work, just have a bit visual distortion on complicated menus, particularly the ones that use background texture images. Others seem okay.
• IE. Works fine for IE 6.
• Safari. Works well on the latest.

To add this effect to your theme, do like the following:

// prop is the theme property.  8 is the speed of the sliding.
prop.effect = new CMSlidingEffect (8);

The sliding speed is between 1 and 100, but a good value is around 8. The sliding is linear. I know some transmenu has accerlations, but I hardly see the difference if the speed is fast :)

The visual distortion is not noticeable in Firefox on simpler menus. It is probably a Firefox clipping bug.