General description

The menu above has been created dynamically based on an unordered list. Here's the code for that list:

<ul id="menuModel5" style="display:none">
	<li id="50000" itemIcon="../images/disk.gif"><a href="#" title="Open the file menu">File</a>
		<ul width="150">
			<li id="500001" jsFunction="saveWork()" itemIcon="../images/disk.gif">
				<a href="#" title="Save your work">Save</a>
			</li>
			<li id="500002"><a href="#">Save As</a></li>
			<li id="500004" itemType="separator"></li>
			<li id="500003"><a href="#">Open</a></li>
		</ul>
	</li>
	<li id="50001"><a href="#">View</a>
		<ul width="130">
			<li id="500011"><a href="#">Source</a></li>
			<li id="500012"><a href="#">Debug info</a></li>
			<li id="500013"><a href="#">Layout</a>
				<ul width="150">
					<li id="5000131"><a href="#">CSS</a>	
					<li id="5000132"><a href="#">HTML</a>	
					<li id="5000133"><a href="#">Javascript</a>	
				</ul>
			</li>
		
		</ul>
	</li>
	<li id="50003" itemType="separator"></li>
	<li id="50002"><a href="#">Options</a></li>
</ul>			
			

A menu item could have these attributes:

  • id = Unique numeric id for a menu item. (the "id" of the <li> tag)
  • parentId = Id of parent element. The script fetches this dynamically from the ul list.
  • itemText = Text of menu item. The content of the <A> tag in the list
  • itemIcon = A custom attribute which you can add to the <LI> tag
  • type = Attibute for the <LI> tag. Example: "separator"
  • jsFunction = Attribute for the <LI> tag. This js code will be executed when someone clicks on the menu item.
  • url = The href attribute of the <A> tag.

Also notice <UL width="150">. The width attribute sets the width of a sub menu group

The menu is then created with the following Javascript syntax:

<script type="text/javascript">
var menuModel = new DHTMLSuite.menuModel();
menuModel.addItemsFromMarkup('menuModel');
menuModel.setMainMenuGroupWidth(00);	
menuModel.init();

var menuBar = new DHTMLSuite.menuBar();
menuBar.addMenuItems(menuModel);
menuBar.setTarget('menuDiv');

menuBar.init();
</script>		
		
		

Append menu items dynamically

It is also possible to update the menu dynamically after is has been loaded. You can add nodes, delete nodes or replace nodes. All this is done from some simple methods.

Example: Click here to add some menu items under Tools.

What I have done is to create a new menuModel object based on another unordered list:

The list:

<ul id="additionalModel" style="display:none">
	<li id="60000"><a href="#">Internet Option</a></li>
	<li id="60001"><a href="#">Debug URL</a></li>
	<li id="60001"><a href="#">CVS</a>
		<ul width="100">
			<li id="600011"><a href="#">Check out</a></li>
			<li id="600012"><a href="#">Update</a></li>
		</ul>
	</li>		
</ul>		
		

The js code for the menuModel:

var menuModel_add = new DHTMLSuite.menuModel();
menuModel_add.addItemsFromMarkup('additionalModel');
menuModel_add.init();	
		

Finally, I have created an <a> tag which calls the replaceMenuItems method when you click on it:

<a href="#" onclick="menuBar.replaceMenuItems(50002,menuModel_add);return false">Click here...</a>

Show/Hide menu items

There are two methods which you can use to show or hide a menu item. These menu items won't be deleted from the menu model.

Here are some examples of how this works:

Hide item (File menu) Show item (File menu)

Here's the code for these two <A> tags:

	<a href="#" onclick="menuBar.hideMenuItem(50000);return false">Hide item (File menu)
	<a href="#" onclick="menuBar.showMenuItem(50000);return false">Show item (File menu) 
		

They are both methods on the menuBar object. The argument sent to this method(50000) is the id of the menu item you want to show or hide.