In WebDDM 3.0 and 3.2, making items link to other pages was fairly straight-forward.

'items':{
	1:{
		'content':'Link back to CC',
		'url':'http://www.cortex-creations.com',
		'cursor':'hand'
	}
}

When the mouse moves over the item, it becomes a standard hand cursor. When the user clicks the item, the browser goes to "http://www.cortex-creations.com". While using WebDDM on my own site (www.cortex-creations.com!) something bothered me.
Well, first, let me back up and say that for ALL of my web browsing, I use Firefox (and more recently, Safari on my Macintosh systems). Firefox (and Safari) support having multiple pages open in one window - the feature is called tabbing. When you middle-click a link in Firefox, it opens in a new tab.
So, anyway. When using WebDDM on my site (and other sites), it bothered me that I could not middle-click on items and open them in new tabs! For that matter, I can't right-click the items either to bring up a context menu to, say, open the link in a new window, or save it to my computer. Well, the item is not a true link - it simply has Javascript onclick code set, that redirects the user's browser to an url. The answer should be pretty obvious. Make the item a link! To do this, you must surround the content with anchors.
Please note that in WebDDM 3.4 and above, the 'url' attribute is no longer supported! You MUST used anchors, so read up. If you really really CANNOT use HTML for your content, take a look at the auto-url plugin.

Example of the new system:

'items':{
	1:{
		'content':'<a href="http://www.cortex-creations.com">Link back to CC</a>'
	}
}

Tada! Pretty simple, right? But it doesn't have the exact effect that we want. In the past, you could click anywhere on the item to go the URL. Now you have to click on the small text. Let's fix it. In your menu CSS file, add a block for your links. For example, if your item arrays looks like this:

// ...
'items':{
	// ...
	1:{
		'content':'<a href="http://www.cortex-creations.com">Link back to CC</a>',
		'class': 'item_class',
		'class_rollover': 'item_class_rollover',
		// ...
	}
	// ...
}
// ...

Then add this to your CSS file:

.item_class a {
}
.item_class_rollover a {
}

This will allow you to easily manipulate how the links in your items look. This is probably the easiest step. Simply add "display: block;" to the link CSS definition:

.item_class a {
	display: block;
}
.item_class_rollover a {
	display: block;
}

This will make the link about as wide as the item. This should make it fit in better. Now your link will probably be wide enough, but have blank space above it and below it. This problem has a simple solution too, but it will require more tweaking. You need to add the "line-height" attribute to the link CSS definition:

.item_class a {
	display: block;
	line-height: 20px;
}
.item_class_rollover a {
	display: block;
	line-height: 20px;
}

The line height will differ from menu to menu, and maybe from item to item.
Experiment with different values until you're happy with the result. All example menus now use the <a> tag instead of the 'url' attribute, and the above fixes have been applied to them. Look at the code of other menus if you need more help. Well, now that we have a nice resolution to our problem, we have to adapt once again to Internet Explorer. Internet explorer won't show any styles for links the way your CSS file is now. Instead of just ".class a", you must have ".class a:hover, .class a:link, .class a:visited". How annoying. Fortunately, it isn't difficult at all to fix, and our new code will work with Internet Explorer, Firefox, Mozilla, Opera, Safari, and virtually all browsers. If your old code looks like this:

.item_class a {
	display: block;
	line-height: 20px;
}
.item_class_rollover a {
	display: block;
	line-height: 20px;
}

Change it to this:

.item_class a:link, .item_class a:visited, .item_class a:hover {
	display: block;
	line-height: 20px;
}
.item_class_rollover a:link, .item_class_rollover a:visited, .item_class_rollover a:hover {
	display: block;
	line-height: 20px;
}

Tutorials: Last - Next