Define alternative css for the menu

A menu with a custom layout requires us to point the script to different css files. The default css files used by this menu are:

  • css_dhtmlsuite/menu-item.scs
  • css_dhtmlsuite/menu-bar.css

In this demo, I want to use some custom css files. I have made a copy of menu-item.css and menu-bar.css, made some changes to the css and saved them in a different folder(a sub folder of this html file named "css").

To use these two css files instead of originals, I call the DHTMLSuite.configObj.setCssPath method:

DHTMLSuite.configObj.setCssPath('css/');

That's actually all you have to do. Now the script will load the css from css/menu-item.css and css/menu-bar.css instead of from the default location which is ../css_dhtmlsuite/menu-item.css and ../css_dhtmlsuite/menu-bar.css.

This is the entire js code for this menu:

	<script type="text/javascript">
	var menuModel = new DHTMLSuite.menuModel();
	DHTMLSuite.configObj.setCssPath('css/');
	menuModel.addItemsFromMarkup('menuModel');
	menuModel.setMainMenuGroupWidth(00);	
	menuModel.init();
	var menuBar = new DHTMLSuite.menuBar();
	menuBar.addMenuItems(menuModel);
	menuBar.setTarget('menuDiv');
	menuBar.init();	
	</script>
		

Notice that the setCssPath is called at line 2. The DHTMLSuite.configObj object doesn't exists until we have created the menuModel object.

When you use more than one widgets on a page

If you have more than one widget on a page, example: a menu bar and a table widget and the css for these widgets are located in different folders, remember to call the setCssPath several times in order to specify the new css path for each widget. example. call DHTMLSuite.configObj.setCssPath('../css_dhtmlsuite/'); right after a tableWidget object is created if the css for the table widget is located inside the css_dhtmlsuite folder.

Specify css file name instead of css file path.

It is also possible to specify another css file name instead of css path. This is done by calling the methods setLayoutCss and setMenuItemLayoutCss for the menuBar object. Example:

	menuBar.setMenuItemLayoutCss('menu-item-demo');// name for the menu items
	menuBar.setLayoutCss('menu-bar-demo');// name for the menu bar