Flash Fireworks - Animated Fireworks

The Flash Accordion Menu

The Accordion Menu Control is an swf file which generates its content from tags in a simple xml file. Simply download the swf file and copy it to your web site directory, modify the xml file, set a few parameters and you're ready to go.

Features

No Flash programming required

XML based dynamic content

2-level menu navigation

URL navigation on header and/or menu item clicks

Javascript callbacks for header and menu item click events

Easy integration with Asp.Net, PHP, Ruby on Rails and other Server side languages

Customizable fonts, colors and menu item sizes.

Configurable control size (up to 1000px)

Compatibility

Flash Player 9+

Samples

Sample 1

Tutorials

Basic XML Menu

Download the Zip Package and extract the files into the directory of the web page where you'll be adding the accordion menu.

Copy the code below into the head section of your web page.

Copy the code below into your web page as a placeholder for your accordion menu. The contents of this div element will be replaced with the actual menu at run-time.

ASP.Net Generated Menu

Database Generated Menu

Documentation

Parameters

AccordionXMLFile = "Accordion.xml";	XML Menu Item File
AccordionHeight = String(iHeight);	Accordion Menu Height
AccordionWidth = String(iWidth);	Accordion Menu Width
AccordionPaneHeight = "35";	Accordion Pane Height
AccordionBGColor = "0xFFFFFF";	Background Color
AccordionPaneColor = "0x024741";	Pane Color
AccordionPaneMouseOverColor = "0x007b9d";	Pane Color when active and on mouse over
AccordionPaneFontSize = "16";	Accordion Pane Font Size
AccordionPaneFontFace = "Arial";	Accordion Pane Font Name
AccordionPaneFontColor = "#FFFFFF";	Accordion Pane Font Color
AccordionItemFontSize = "14";	Menu Item Font Size
AccordionItemFontFace = "Arial";	Menu Item Font Face
AccordionItemFontColor = "#000000";	Menu Item Font Color

Events

AccordionPane_Click(int ID) AccordionMenuItem_Click(int ID)

XML File Format

<AccordionPanes>
    <Data>
        <Id>100</Id>
        <Title>Home</Title>
        <MenuItems>
            <Data>
                <Id>101</Id>
                <Title>Overview</Title>
                <URL>default.aspx#</URL>
            </Data>
        </MenuItems>
    </Data>
    <Data>
        <Id>200</Id>
        <Title>Samples</Title>
        <MenuItems>
            <Data>
                <Id>201</Id>
                <Title>Sample 1</Title>
                <URL>default.aspx#</URL>
            </Data>
        </MenuItems>
    </Data>
    <Data>
        <Id>300</Id>
        <Title>Tutorials</Title>
        <MenuItems>
            <Data>
                <Id>301</Id>
                <Title>Basic XML Menu</Title>
                <URL>default.aspx#Basic</URL>
            </Data>
            <Data>
                <Id>302</Id>
                <Title>ASP.Net Generated Menu</Title>
                <URL>default.aspx#ASP</URL>
            </Data>
            <Data>
                <Id>303</Id>
                <Title>Database Generated Menu</Title>
                <URL>default.aspx#Database</URL>
            </Data>
        </MenuItems>
    </Data>
    <Data>
        <Id>400</Id>
        <Title>Documentation</Title>
        <MenuItems>
            <Data>
                <Id>401</Id>
                <Title>Parameters</Title>
                <URL>default.aspx#Parameters</URL>          
	    </Data>
            <Data>
                <Id>402</Id>
                <Title>Events</Title>
                <URL>default.aspx#Events</URL>
            </Data>
            <Data>
                <Id>402</Id>
                <Title>XML File Format</Title>
                <URL>default.aspx#XML</URL>
            </Data>
            <Data>
                <Id>403</Id>
                <Title>Source Code</Title>
                <URL>default.aspx#SourceCode</URL>
            </Data>
        </MenuItems>
    </Data>
    <Data>
        <Id>500</Id>
        <Title>Downloads</Title>
        <MenuItems>
            <Data>
                <Id>501</Id>
                <Title>SWF File</Title>
                <URL>default.aspx#downloads</URL>
            </Data>
            <Data>
                <Id>502</Id>
                <Title>Sample XML File</Title>
                <URL>default.aspx#downloads</URL>
            </Data>
            <Data>
                <Id>503</Id>
                <Title>SWF Object</Title>
                <URL>default.aspx#downloads</URL>
            </Data>
        </MenuItems>
    </Data>
</AccordionPanes>

Source Code

Downloads

Right-click and select 'Save Target As...'

Accordion_1_0.zip	Zip Package containing all files.
Accordion.swf	Flash File
Accordion.xml	Sample XML menu definition file
SWFObject.js	Open Source Flash SWF JavaScript Loader