Starting in WebDDM 3.2, you can change attributes for menu items even after they have been built. This page shows an example.





You can change attributes individually, as shown here, or you can completely re-load your menu; this is useful when you need to change many items at once, or are getting menu content over an AJAX request. The system for changing attributes individually or reloading a menu is different: read on for instructions about both.
Click here to completely reload the menu. This is useful in many circumstances, but a very simple example would be if you wanted to highlight the item that points to the current page, or if you needed to change the style of the menu according to the user's preferences. Of course, there is a limit to the attributes you can change. For example, you cannot change the position attributes or dimensions of items. Note There are plans to change this in the future.
Here is the list of attributes you can modify:

• content
• content_rollover
• content_rollover_pressed
• content_menuopen
• content_menuopen_pressed
• content_menuopen_rollover
• css
• css_rollover
• css_rollover_pressed
• css_menuopen
• css_menuopen_pressed
• css_menuopen_rollover
• class
• class_rollover
• class_rollover_pressed
• class_menuopen
• class_menuopen_pressed
• class_menuopen_rollover
• alphaTrans
• clipTrans

A big change was made in WebDDM 3.2 to make this feature possible. That was changing WebDDM from a flat-function based system to an Object Oriented/API system.
Remember how you created your first WebDDM menu?

var myMenu = new WebDDM('id', data);

This is the key to this feature. Notice that once you've created the WebDDM menu object, you can retrieve it in other places in your code too:

var myMenu = new WebDDM('id', data);
// do some other stuff...
var myMenuAgain = getWebDDMObject('id');

If you were using any other software this would be impossible or extremely difficult, but it's extremely simple in WebDDM.
By using the "modifyMenuData" method, you can easily modify any data.

// Create a new menu
var myMenu = new WebDDM('id', data);


// do some other stuff...


// Get the WebDDM object
var myMenuAgain = getWebDDMObject('id');
// Change the content of the first menu item
// FUNCTION CALL: myMenuAgain.modifyMenuData('path-to-attribute', 'New Value');
myMenuAgain.modifyMenuData('items-1-content', 'New Item Content');

See? In two lines of code, we've successfully changed the content of the item. Even if the item was already visible, the change will take effect immediately!
If you'd like to get a better handle of what's going on here, just view the source of this page and the included Javascript source file (see below).
Have fun! Reloading a menu is even simpler than modifying individual attributes.
First of all, you need to have your WebDDM object ready to use, as described above:

// Create a new menu
var myMenu = new WebDDM('id', data);


// do some other stuff...


// Get the WebDDM object
var myMenuAgain = getWebDDMObject('id');

Then, once you have your object, simply call the method "rebuildMenu" with your new menu data - the data should be in the same format as the data passed to "new WebDDM".

// New menu data
var newMenuData = {
	'position':'relative',
	'top':0,
	'left':0,
	'width':500,
	'height':30,
	'expand_menu':'auto',
	// ... more data ...
};

// Get the WebDDM object again
var myMenuAgain = getWebDDMObject('id');
myMenuAgain.rebuildMenu(newMenuData);

Click here to completely reload the menu. View CSS file - View JavaScript file. Examples: Last - Next