Installing Cloud Menu
1. Download and Extract
Download the zip file and extract it.
Put CloudMenu.swf and effectscode.com.js, in the same folder as your web-page.
2. Add code
Add the following HTML code on your page:
<!-- ________ START EFFECTS CODE - http://www.effectscode.com/ ________ -->
<script src="effectscode.com.js" type="text/javascript"></script>
<div class="com.effectscode.CloudMenu" style="width:400px; height:400px;">
<textarea class="effectscode" style="visibility:hidden;" rows="1" cols="20">
// <!-- ____________________________ Start XML ___________________________
<CloudMenu>
<style spacing="12" scale="1.2" shadows="1" lineThickness="0.4">
<SphereNode>
<TextNode text="Home" />
<TextNode text="Examples" />
<TextNode text="Installing" link="installing.html" />
<TextNode text="Download" />
<TextNode text="Sub-menu" color="#77bb77">
<TextNode text="FAQ" />
<TextNode text="Flash" />
<TextNode text="Effects" />
</TextNode>
</SphereNode>
</style>
</CloudMenu>
// _____________________________ End XML ____________________________ -->
</textarea><div class="alternateContent">
<a href="http://www.effectscode.com/Menus/CloudMenu">Cloud Menu flash
effect script</a> requires <a href="http://www.adobe.com/go/getflash/">Flash 9</a>
</div></div>
<script type="text/javascript">ECreplace();</script>
<!-- _______________________ END EFFECTS CODE _________________________ -->
<script src="effectscode.com.js" type="text/javascript"></script>
<div class="com.effectscode.CloudMenu" style="width:400px; height:400px;">
<textarea class="effectscode" style="visibility:hidden;" rows="1" cols="20">
// <!-- ____________________________ Start XML ___________________________
<CloudMenu>
<style spacing="12" scale="1.2" shadows="1" lineThickness="0.4">
<SphereNode>
<TextNode text="Home" />
<TextNode text="Examples" />
<TextNode text="Installing" link="installing.html" />
<TextNode text="Download" />
<TextNode text="Sub-menu" color="#77bb77">
<TextNode text="FAQ" />
<TextNode text="Flash" />
<TextNode text="Effects" />
</TextNode>
</SphereNode>
</style>
</CloudMenu>
// _____________________________ End XML ____________________________ -->
</textarea><div class="alternateContent">
<a href="http://www.effectscode.com/Menus/CloudMenu">Cloud Menu flash
effect script</a> requires <a href="http://www.adobe.com/go/getflash/">Flash 9</a>
</div></div>
<script type="text/javascript">ECreplace();</script>
<!-- _______________________ END EFFECTS CODE _________________________ -->
3. Edit XML Section
There are some further examples to follow, and also some documentation. The file follows the format of XML - nested tags correspond to branches on the menu tree structure. The width and the height are specified in enclosing div style tag. The rest of the div block contains alternative HTML that will display if the browser does not support the effect.
4. Hide alternative content (Optional)
Some browsers display a quick flash of the alternative content before Flash loads. To avoid this, add a this style rule to your HTML <HEAD> block:
<style type="text/css">
html.hasFlash .alternateContent { visibility: hidden; }
</style>
html.hasFlash .alternateContent { visibility: hidden; }
</style>