Welcome to WebDDM 3!

Tutorials

Tutorials - 1 - Basics

Note: These tutorials were written to help you better understand WebDDM and use this great software to its full potential. So, I have to ask that if you have any questions left after reading these tutorials, you email . Thank you!!

1. Create a menu

This code will create a completely new menu. NOTE: to clear any possible confusion, I would like to emphasize that this is a COMPLETELY new menu and does not have any relationship to any other menus on the page.

var aNewMenu = new WebDDM('container_id', menu_data);

The first parameter, "container_id", is the ID of the DIV element that all of the menu will be placed in. For example, the above code would place all of the menu HTML in this DIV tag:

<div id="container_id"></div>

And that's it!
Because of this system, you can easily create relatively-positioned menus that fit into the flow of the page. For a more in-depth look at how to do this, see the "Relative Menu" example page.
We will discuss what "menu_data" is in the next tutorial.

2. Suggested structure

You must create your menu after the document has loaded, preferably using the BODY tag's ONLOAD attribute.
You should only use CSS classes to define the styles of your menu; this keeps everything extremely simple, and also creates the possibility of easily changing menu styles only using CSS!
With this in mind, you should use this structure whenever possible:

				YourPage.html:
<html>
	<head>
		<title> Welcome to WebDDM 3! </title>
		
		<!-- WebDDM 3 required libraries -->
		<!-- WebDDM 3 is released under the terms of the GNU GPL open source license -->
		<!-- Web Drop Down Menu is developed by Cortex Creations - www.cortex-creations.com -->
		<script src="url/to/core.WebDDM.compressed.js"></script>
		<!-- End WebDDM 3 required libraries -->

		<!-- WebDDM 3 config - files for custom menus -->
		<link rel="stylesheet" href="path/to/css/file/menu.css" type="text/css" />
		<script src="path/to/javascript/file/menu.js"></script>
		<!-- End WebDDM 3 config -->

	</head>

	<!-- WebDDM 3 initialization -->
	<body onload="initWebDDM();">
	<!-- End WebDDM 3 initialization -->

	<!-- WebDDM 3 menu container -->
	<div id="menu_container_id"> WebDDM menu will go here  </div>
	<!-- End WebDDM 3 menu container -->	

	</body>
</head>

				menu.css:
/* Menu styles */
.style1 {}
.style2 {}
/* Etc ... */

				menu.js:
// Initialize WebDDM
function initWebDDM ()
{
	var menu_data = ...
	var myNewMenu = new WebDDM('menu_container_id', menu_data);
}

This will help you keep everything organized and very simple.

Please keep the "copyright" notice in your HTML file - it is the least you can do for all the work we have put into developing WebDDM! Thank you. :)

Alternate Menu

It is good practice to provide a menu for browsers that do not work with WebDDM: For example, some search engines, or browsers with Javascript turned off. Here's how: Simply put the "alternate menu HTML" inside the menu container. If WebDDM works, the alternate menu will simply not be visible.

<div id="menu_container_id">
	<!-- Begin Alternative Menu HTML -->
		<a href="home.html">Go Home</a> -
		<a href="http://www.google.com">Go Google</a>
	<!-- End Alternative Menu HTML -->
</div>

Quickload

One of the popular questions about WebDDM has been, "why does my menu load so slowly"? Well, WebDDM does NOT load slowly. In fact, it's about the fastest, if not THE fastest, Javascript menu software. But it CAN be slow. The code above does not actually build menus until EVERYTHING else on the page is loaded; this means if you have large images/animations/etc on your page, the menu will appear to load very slowly. The solution is very simple. Simple move the call to "initWebDDM()" from document.onload to a Javascript block right after the menu container. NOTICE: Do NOT put the call to initWebDDM() ANYWHERE before the menu container, unless it is in document.onload!

<!-- WebDDM 3 menu container -->
<div id="menu_container_id"> WebDDM menu will go here  </div>
<!-- End WebDDM 3 menu container -->
<!-- WebDDM 3 initialization -->
<script language="JavaScript" type="text/javascript">
	initWebDDM();
</script>
<!-- End WebDDM 3 initialization -->

Tutorials

Tutorials: Last - Next