It’s definitely not the week I originally planned, but here is XWebMenu v3 Alpha. This DHTML menu comes as-is and without documentation. Most of the gory details will be in this post because I haven’t yet written an article component for my website.

Unlike previous versions, version 3 encapsulates all public reference types and objects within a namespace called xwebMenu.

Like version 2, you can create and populate menu systems using XML to define the system's structure. Here’s a sample of the schema:

<xwebMenuStrip>
    <items>
        <item text="Item Text" href="http://www.google.com">
            <menu>
                <items>
                    <item text="Item with Script" enabled="false">
                        <clickEvents>
                            <event>
                                functionToCall();
                            </event>
                        </clickEvents>
                    </item>
                </items>
            </menu>
        </item>
    </items>
</xwebMenuStrip>

The <xwebMenuStrip /> and <menu /> elements contain one <items /> element which can contain multiple <item /> elements. Items are broken into two groups: menu strip items and menu items, and they follow these rules:

• Menu strip items must have a value specified for the text attribute, but all other attributes and elements are optional (but it won’t be very functional).
• Menu items have no such restriction; empty menu items result in a separator.
• All items can have one optional <clickEvents /> element that contains one or more <event /> elements. The <event /> element contains the JavaScript code that executes when the user clicks that item.
• All items ignore the href attribute when a menu is specified within that item.

Use the create() method to create and populate a menu system. This method accepts an object called an options object. One such option is xmlFile; its value is the URL of the XML file that defines the system's structure. Version 3 uses XmlHttp to retrieve the XML file asynchronously. The following code sample illustrates the use of the xmlFile option:

var menuOptions = { xmlFile : "someXmlFile.xml" };

var menu = xwebMenu.create(menuOptions);

Menu systems get appended to the document body by default; change this behavior by using the parentElement option. Make sure the element exists to avoid errors.

var menuOptions = {
    xmlFile : "someXmlFile.xml",
    parentElement : document.getElementById("divMyMenu")
};

var menu = xwebMenu.create(menuOptions);

View the XML demo.

Similarly, a system's structure can be defined with literals (so you can create a menu with parsed JSON). The schema is similar to the XML schema:

items : [
    {
        text : "Item Text",
        href : "http://www.google.com",
        menu : {
            items : [
                {
                    enabled : false,
                    text : "Item with Script",
                    clickEvents : [ functionToCall ]
                }
            ]
        }
    }
]

The following code demonstrates a system's creation with literals:

var menuOptions = {
    items : [
        {
            text : "Item Text",
            href : "http://www.google.com",
            menu : {
                items : [
                    {
                        enabled : false,
                        text : "Item with Script",
                        clickEvents : [ functionToCall ]
                    }
                ]
            }
        }
    ],
    parentElement : document.getElementById("divMyMenu")
};

var menu = xwebMenu.create(menuOptions);

View the literal Demo.

Like version 2, this new version has two behaviors: normal and hover. Normal behavior, the default, causes XWebMenu to behave in a normal manner; the system responds to the user's mouse clicks to show and hide menus. The hover behavior causes the system to respond to the user's mouse movement. Menus are shown and hidden according to where the user's mouse pointer is located.

You can set the menu system's behavior with another option when creating the system. If using XML , use the behavior attribute in the <xwebMenuStrip /> element. Valid values for this attribute are "normal" and "hover".

<xwebMenuStrip behavior="hover">

You can also assign a value to the behavior option in the option object:

var menuOptions = {
    behavior : xwebMenu.behavior.hover // for hover
};

I apologize for the lack of documentation. There are other features available in this widget that I did not cover (icons, disabling/enabling items, and other parts of the API). I’ll write a full blown article and reference when the widget is final. Chances are good that there won’t be a beta until the end of the year, as other projects take precedence. However, let me know if you find any bugs, and I’ll do my best to keep the .zip updated. Any feedback is appreciated.

Download XWebMenu Version 3 Alpha