Before we even start you must understand that this solution is not perfect and has some limitations that you must consider before you decide to continue.

For example, this solution would work for the following set of browsers:

• Internet Explorer 4 and above
• Any Mozilla-based browser including FireFox
• Any KHTML-based browser including Konqueror and Safari
• Opera 7 and above

The solution will NOT work for the following browsers:

• Netscape 4
• Opera 5 and 6
• pre-Mozilla 1.0 based browsers such as Mozilla 0.6 and 0.9

Here's a working sample so you can see it in action

1. You must create the menus in one language… let’s say, English for example.
2. Implement the menus as you would normally do
3. Then, for those pages that require the translation, load the dmbex.js file right after the menus’ loader code.
   Click here to download the dmbex.js file.
4. Use the "setElementCaption" function provided by the dmbex.js library to change the caption of the menu items programmatically.
5. Finally, use the "setElementURL" function to change the links in the menu items (if necessary).

Here's the source code used in the sample above so you can see how this is done:

• It will be very common that some translated menu items will result in larger captions. In order to avoid having the translated caption from being cut, you will have to design your menus so the available area is always wide enough to fit the translated text.
  
  For example, the term "Shop Online” translated into Spanish will look like "Comprar en línea”
  The Spanish version has 5 more characters so when you create the menus make sure you add some extra spaces at the end of the original caption, like this:
  ”Shop Online     ”
  
  This will force DMB to create a slightly wider menu and you will not have any problems when translating the caption.
  If you wish you can avoid the use of " ” and simply force a menu to be wider by using the Menu->Special Effects->Group Size dialog.
   
• The translation process is done on the client side… so translating a very large menu on a slow machine can cause flickering.
  This is rare… but some users have reported it.
   
• In this example we are using a button to trigger the translation. On a real world application you may want to trigger it automatically. You may use a code similar to this one to perform such a task:

  <script language="JavaScript" src="dmbex.js"></script> <script language="JavaScript"> window.onload = function() { //Translate Toolbar setElementCaption("Home", "Inicio"); setElementCaption("Products", "Productos"); setElementCaption("Shop Online", "Comprar"); setElementCaption("Contact Us"), "Contáctenos"); //Translate the "Shop Online" Group setElementCaption("Privacy Information", "Info. de Privacidad"); setElementCaption("Shop Now!", "Compre Ahora!"); } </script>

  As you can see, the translation code is now triggered by the onload event so the menus will be automatically translated whenever the page containing this code is loaded.
   
• Finally, adding the translation code will cause your pages to grow in size… so a very large menu can considerably increase the download time of your pages.