Accordion Menu Plugin
for Flash and HTML5
by Alex Giannakidis - email@example.com
Accordion Menus come handy because they are “spacesavers” in rich applications that need to have their content easily accessible. Especially in mobile devices, accordions menus are found everywhere. According to wikipedia: an accordion (in graphical user interfaces) is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration. In our case I split the accordion menu in groups and events. Groups are the items that can be expanded and reveal the event buttons. A group can have numerous events.
For testing purposes I' ve prepared an accordion menu generator that processes custom parameters and generates the menu "on the fly".
You can try it out here : Accordion Menu Generator
For further information about the usefulness of accordion menus and the development of the generator, read this article : An Accordion Menu Generator for the krpano viewer
This a free plugin
. You are encouraged to use it in personal or commercial projects :) Please consider creditting.
If you are a developer and would like to take this plugin a step further, you can fork (and star) the github repository
I've setup for this purpose.
- Include accordion-menu.xml in your project
- fill in your parameters in initParameters() (dimensions are in % percentage of the viewers width and height)
- call createMenu() onstart
- (the accordion menu uses the textfield.swf plugin as it's core element, so be sure to check file paths)
- To label and set the onclick events of the buttons based on your preference include this in your code (for every button) :
The above figure shows only part of the viewer. Blue dotted lines refer to dimensions (width, height, position) and green lines refer to quantity of group or event buttons. The required variables of the accordion menu are:
X: x position of menu (origin top left)
Y: y position of menu (origin top left)
MW: width of menu
GH: group buttons height
EH: event buttons height
GN: quantity of group buttons
G1EN: quantity of event buttons for group 1
G2EN: quantity of event buttons for group 2
G3EN: quantity of event buttons for group 3
G4EN: quantity of event buttons for group 4