UDM initially uses four scripts in this configuration - three
in the <head>
and one in the <body>
.
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.
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.
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.
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.