Developer's manual

Adding the scripts (JS configuration)

UDM initially uses four scripts in this configuration - three in the <head> and one in the <body>.

For the head section

The three scripts in the head section are: udm-custom.js, the configuration file; udm-control.js, a control script that processes it and makes environment variables; and udm-style.js, which compiles and generates the menu CSS.

Add them to your page using script includes like this (you don't need the language attribute):

<!-- ULTIMATE DROP DOWN MENU Version 4.6 by Brothercake -->
<!-- http://www.udm4.com/ -->
<script type="text/javascript"
	src="/udm-resources/udm-custom.js"></script>
<script type="text/javascript"
	src="/udm-resources/udm-control.js"></script>
<script type="text/javascript"
	src="/udm-resources/udm-style.js"></script>

Other things being equal they can go anywhere in the head section. However since global styles can potentially affect the menus, but the menu styles are extremely unlikely to affect other rules, it's best to put them after any other style sheets.

Later, we can replace udm-style.js with a generated CSS equivalent. But not yet.

For the body section

Only one standard script goes in the body section, the master menu script: udm-dom.js. It must go in the <body> - if you put it in the <head> then it won't work in Mac/IE5.

As with the other scripts, it doesn't need a language attribute:

<script type="text/javascript"
	src="/udm-resources/udm-dom.js"></script>

Within the body section it can go anywhere, however if you have an existing window.onload function on your page then the script should come after it, to avoid an onload conflict in Mac/IE5.

The DOM script provides core functionality, but does not include full keyboard access. For best accessibility I strongly recommend including the keyboard navigation module as well (which you already have in your udm-resources folder). This should come after the udm-dom.js script include:

<script type="text/javascript"
	src="/udm-resources/udm-mod-keyboard.js"></script>

If you're using any other modules or extensions, these should also go in the body section and come somewhere after the udm-dom.js script include.

The defer attribute

If you want to control your page's overall rendering order, you may be able to do so using the defer attribute. If it's present, this attribute should delay executing a script until the rest of the page has rendered (equivalent to putting it at the end of the body section); otherwise the script should be executed when the browser gets to it.

<script type="text/javascript" defer="defer"
	src="/udm-resources/udm-dom.js"></script>

If you set the script to defer then the navbar will be visible even before the script is parsed, because it's not generated by scripting; however the indicator-arrows are added afterwards, so you won't see them until the page has finished loading. If you don't use defer, any content which comes after the script will not be rendered until the script has been parsed, which may give the impression of a slightly longer loading time overall.

It's a fine point of presentation this one - your call to decide - the script is light enough that it shouldn't make a huge difference either way.

Please note: you can only do this for the scripts in the body section - the scripts in the head section need to be executed immediately.


Search

We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.

-