A menu bar with custom CSS

This is a demo where we are using custom css for the menu bar. This is how it is done:

Create custom css files

First I have created two css files and saved them as demo-menu-item.css and demo-menu-bar.css. They are based on the original menu-item.css and menu-bar.css which you will find inside the css_dhtmlsuite folder.

I have included these files by using the <link> attribute in the head section of this HTML file:

	<link rel="stylesheet" href="css/demo-menu-item.css" media="screen" type="text/css">
	<link rel="stylesheet" href="css/demo-menu-bar.css" media="screen" type="text/css">
		

If you open the css files menu-item.css and menu-bar.css, you will see that all classes starts with the "prefix" DHTMLSuite_. In the new css files, I want to use a custom prefix instead of "DHTMLSuite_". So I did a global search and replace in the new css files and replaced "DHTMLSuite_" with "Custom_".

Then I called two methods for the menuBar object in order to notify the script of the new css prefix:

	menuBar.setMenuItemCssPrefix('Custom_');
	menuBar.setCssPrefix('Custom_');		
		

This is the entire js code for the menu bar you see above:

	var menuModel = new DHTMLSuite.menuModel();
	menuModel.addItemsFromMarkup('menuModel');
	menuModel.setMainMenuGroupWidth(00);	
	menuModel.init();
	
	var menuBar = new DHTMLSuite.menuBar();
	menuBar.addMenuItems(menuModel);
	menuBar.setMenuItemCssPrefix('Custom_');
	menuBar.setCssPrefix('Custom_');
	menuBar.setTarget('menuDiv');
	
	menuBar.init();
	

An other way to define alternative css

There's also another way of doing this. The method described above is very useful if you want to have more than one menu on a page and with different styling(as we have here). If all your menus got the same styling, then you can follow a simpler procedure.

The first thing you do is to make a copy of menu-item.css and menu-bar.css and save them in the same folder as the originals(example: menu-item-2.css and menu-bar-2.css). Then make your changes to these two css files.(NB! You don't have to change the prefix of the css class when you're using this method).

The last thing you have to do is to make the menuBar object aware of these two css files:

	menuBar.setCssLayout('menu-bar-2.css');
	menuBar.setMenuItemLayoutCss('menu-item-2.css');
		

The script will load these two css files dynamically, so you don't have to include them by using <LINK> tags.