XML-Driven Drop-Down Menu
         by senocular

Menu Generation
Everything's looking good up to this point. We've gotten most of the XML cleared up and outlined how what's needed can be extracted using properties of the XML object in Actionscript. Now all we need is the script to actually physically make the menu based on all of that.

With the nature of this menu being created, you have not just a single menu, but a menu with drop-down submenus as well. What we can do to streamline this a little bit is to make a single function to take care of the generation of a single complete menu. This includes all the items in one menu node but not including submenus. Submenus would also be created with this function, but independently of any other menu as a separate process. So the same function that creates the main menu will create all of its submenus and any submenus in those submenus etc. Lets call this function GenerateMenu.


Call this once to make the main menu then again for each submenu when needed (when rolling over a menu item that contains a submenu). When making a menu, the GenerateMenu function will need to know a few things. Things like where and how to make the menu and what xml node the menu should be based. These can all be passed in as parameters to that function. Once in there, GenerateMenu can read through the XML node, attach menu item movieclips for each node and assign them all actions corresponding with those specified in the XML file.

GenerateMenu(container, name, x, y, depth, node_xml);

We'll work our way into the specifics as we go.

Giving Actions to Items
The GenerateMenu function, when creating the menu, will need to assign the appropriate actions to each menu item as its made. There will be 3 kinds of actions here. One is the action for a basic item when that item is pressed as defined in XML. A second action is the opening of a sub menu if that item is of the type menu. The third action, which may not be as obvious initially, is the closing of submenus. Once a submenu is opened, it's not supposed to remain forever. There are certain circumstances where that submenu will have to be closed or another submenu will have to be created in its place to accommodate for a separate submenu opening. That all depends on how you define your submenus (or menu in general) to behave.

The Nature of a Submenu
Submenus are a special entity in navigation. Many have unique behaviors. This can differ from application to application as well as operating system to operating system. How yours behaves is up to you. Beware, programming for them can get out of hand. For the purposes of this tutorial, I'll try to keep it simple. The big challenge with submenus is when to open them and when to close them. Some navigations, which you may or may not have encountered in your adventures throughout the web, are plagued with early the termination of submenu windows. Often they close before you can even use them. Others can remain for an annoyingly long time making navigation difficult and cumbersome. Here's how this one will be set up.

object event action
menu rollOver open up a submenu, replace any pre-open submenu in the current menu if exists
press run XML defined action; close all submenus
item rollOver close any submenu in the current menu if exists
press run XML defined action; close all submenus that may be open
anything else mouseUp close all submenus that may be open

Lets look back to a working version of the menu system we're developing. How does it compare to others? Hopefully fairly well since it isn't changing! :)

[ menu in Flash defined with XML ]

Submenu Hierarchy
When a submenu is created, its created within the movieclip of the menu that opened it. This is much like its very organization, and the organization of the XML for that matter. This also makes it much easier to manage, especially when submenus of that submenu is created within that submenu's movieclip. This way, if you were to remove any one submenu, all submenus of that submenu are removed with it.

[ submenus kept in menus which created them ]

Notice from the diagram, if you were to remove the submenu, the submenu of submenu would be removed with it as it is a part of that menu movieclip - attached within it. And when might that submenu be removed? It would be removed whenever you click on any menu option (item or menu), when another menu item other than the one which opened the submenu is rolled over or when the user clicks anywhere other than on the menu.

No problem right? Now lets translate all this into working functional code.





kirupa.com's fast and reliable hosting provided by Media Temple.