Building JavaScript DHTML Web Menus Using CSS Properties

This document should help describe the method for setting up menu styles using just Cascading Style Sheet (CSS) properties

Normaly properties, such as colors, font styles, etc are declared as static properties in the menu's style object. The reason for this (as this is the prefered method) is due to cross browser compatibility. Web Browsers such as Netscape 4.x do not fully support all CSS2 properties and will not render properly using CSS alone. If you still need support for Netscape 4.x, the static approach is the only method that will work successfully across all supported web browsers.

The CSS method requires full CSS2 support, this is provided as standard with most modern web browsers and is an ideal way for building fully dynamic menus. Within this document we will attempt to demonstrate the technique for specifying styles to your Milonic DHTML Menus by using CSS alone.

Please note that not all properties can be declared but the vast majority should be fine.

Most Colors and Font Style properties are accessible but some borders and boxes may not appear as expected.

Quick Step

The Quick Step gives a brief rundown of CSS Menus with a simple demonstration for people that are familliar with the menu and know enough CSS to get started and would like to get their hands dirty as quickly as possible.

Quick Step, in a nutshell

The main steps required to get up and running with CSS Menus is:

• Remove all static properties from your menu styles
• Declare onclass and offclass CSS Properties in your style sheet
• Declare onclass and offclass Style references in your menu styles
• Test and tweak

The first thing you need to do is download a sample menu from our website, we recommend either the Horizontal or Vertical menus as these are the most basic menus. Keeping things as simple as possible helps with the learning curve.

Open the file menu_data.js in your prefered text editor. If you need a text editor, we recommend UltraEdit, the menu code and all associated web pages at Milonic.com are built using the text editor from UltraEdit it's obviously not the only text editor availalble but it is one of the best and has many configuarble options useful for text based development.

Once you have your menu_data.js file open you need to remove all properties from inside the default menu style. In the case of our download it is called "menuStyle"

Once you have removed all properties the menuStyle object should look like this:

with(menuStyle=new mm_style())
{

}

If you run the menu with a style like the above you will see it looks very un-user-friendly but it will work, very few menu systems will work without any styles and this is one of the reasons why the Milonic DHTML Menu stands out from the rest.

Looking at your new menu, you can see that there are no mouseover colors and no images to denote a submenu, these we will now attempt to add as CSS properties.

The next step is to add references to your CSS Classes. You will need to declare one class for mouse over and one class for mouse out. In our example we will call than "cssmouseon" and "cssmouseoff". The menu style property names are "onclass" and "offclass" and need to be decalred as follows:

with(menuStyle=new mm_style())
{
   onclass="cssmouseon";
   offclass="cssmouseoff";
}

Now run the menu again to ensure that it works. The menu will still appear as before because we havn't yet declared any CSS properties. We are mainly ensuring that the menu still works after the new changes have taken place.

Quick Top Tip As soon as you have made even a small change to the menu data, it is good practice to test the menu time and time again. This means that you should always know what you did if it fails and you'll know exactly what you did to break the menu definitin. Also, if you are using a good text editor, you can then press CTRL+Z to back track right to the point where the menu was working fine and then try again.