Why You Might Want to Use YADM

YADM was created with the following ideas in mind:

• JavaScript Independence - YADM enhances a nested list in the markup, and doesn't generate any extra markup.
  
  
• Mouse Independence - By applying the functionality when clicking and when hovering over the item keyboard users can also reach the nested menus, something that cannot be done in CSS-only solutions
  
  
• Easy restyling - The look is maintained exclusively in CSS, YADM applies different classes to the markup to achieve that.
  
  
• "Style on the fly" - You can define a style for the non-JavaScript menu and one for the JavaScript enhanced one in the same style sheet. Interactive elements get an own class indicating the user that this is not a simple link, but contains a hidden menu. Active elements get an own class.
  
  
• No script knowledge necessary - Changes in the markup (adding classes) change the behaviour, rather than you knowing how to change the JavaScript.
  
  
• Unobtrusive Javascript - Only applies itself if all is working (right markup, DOM-enabled browser) and works fine with other scripts
  
  
• Browser independence - Although some browsers may behave oddly (Opera still has issues updating the screen, resulting in half-visible menus), the script does not sniff or check for any browser - just for objects.

YADM enhances a nested list (UL) in the markup, and it applies different classes to the elements when they become "interactive".

The markup has to be something like this:

<ul id="nav">
 <li><a href="index.html">Home/News</a></li>
 <li><a href="examples.html">Examples</a>
  <ul>
   <li><a href="dropdown.html">Absolute Dropdown</a></li>
   <li><a href="reldropdown.html">Relative Dropdown</a></li>
   <li><a href="flyout.html">Flyout menu</a></li>
   <li><a href="expanding.html">Expanding Menu</a></li>
   <li><a href="others.html">Submitted examples</a></li>
  </ul>
 </li>
 <li><a href="report.php">Contribute</a></li>
 <li><a href="using.html">Using YADM</a>
  <ul>
   <li><a href="using.html#css">Changing look and feel</a></li>
   <li><a href="using.html#js">How it works</a></li>
   <li><a href="using.html#other">Working with other scripts</a></li>
   <li><a href="using.html#not">What it does not do</a></li>
  </ul>
 </li>
</ul>

All YADM needs is the nav ID on the first UL. You can change this ID to something else in the script, if necessary. If you don't want YADM to apply hover states to the list (for example when creating an expanding and collapsing menu), add a class called nohover to the nav UL:

<ul id="nav" class="nohover">
[...]
</ul>

If you don't want one of the nested lists to be collapsed, add a class called current to either the LI containing the list, or any of its elements.

<ul id="nav">
 <li><a href="index.html">Home/News</a></li>
 <li><a href="examples.html">Examples</a>
  <ul>
   <li><a href="dropdown.html">Absolute Dropdown</a></li>
   <li class="current"><a href="reldropdown.html">Relative Dropdown</a></li>
   <li><a href="flyout.html">Flyout menu</a></li>
   <li><a href="expanding.html">Expanding Menu</a></li>
   <li><a href="others.html">Submitted examples</a></li>
  </ul>
 </li>
 <li><a href="report.php">Contribute</a></li>
[...]
</ul>

To achieve the functionality of showing and hiding the nested lists, YADM applies different classes to the elements. This means you can control the look and the way the elements are hidden completely in CSS:

Applied classes

Class name	element	desired effect
dhtml	main UL	indicates when JavaScript/DOM is available, you can use this class to differentiate the presentation of the UL. For example UL#nav{width:auto;} and UL#nav.dhtml{width:10em;}
isParent	any LI containing a nested list	indicates that this LI contains a menu and is not just a link. In the above example this class adds the downward arrows.
isActive	LI containing the currently visible nested list	indicates the current open menu item, in this case here it changes the background of the LI to a light yellow.
hiddenChild	all nested lists (UL element)	hides the element, apply any CSS technique you want (off-left, or display:none or or or).
shownChild	currently active nested list (UL element)	shows the currently active nested list.

Check the examples page to see how you can use these classes.

You can change the name of these classes in the variable section of the script.

YADM uses DOM to enhance a nested list by adding and removing different CSS classes to and from it. I will not get into details of the JavaScript here, as the script itself  has loads of comments in it. What it does is the following:

• Check if the browser is capable of using DOM
  
  
• Check if the element with the ID nav is available
  
  
• Loop through all the LIs inside this UL
  
  
• Check if either the LI or any of the LIs inside the nested UL
  contain the class current.
  
  
• If that is not the case, apply the class isParent to the LI and hiddenChild to the nested UL.
  
  
• If that is the case, apply the class isActive to the LI and shownChild to the nested UL.
  
  
• If there is no current in the LI, apply a function that swaps the classes (isParent becomes isActive and hiddenChild shownChild) and renders the link inside the LI useless (to avoid clicking and loading the page instead of showing the menu)
  
  
• If there is no class called nohover in the main UL, apply the class onmouseover and onclick and revert to the original state onmouseout.
  
  
• Otherwise, just apply it onclick.

Working with Other Scripts

If YADM were a pupil, its yearbook would sport a smiley face stating "plays well with others". There are no global variables or functions outside the main function yadm and you can easily add your own functions to the onload construct at the bottom of the script.

What it Does Not Do

YADM was developed to help you create navigations that make sense, not to create whizz-bang navigations that are there for the sake of being flashy. The backbone of every web site is a good information architecture. If you need to reproduce the sitemap on every page, then something is wrong. Therefore YADM does not support:

• Browser sniffing and creation of bespoke content - we hope to fix all browser bugs via CSS hacks instead.
  
  
• More than one level of navigation - as they are hard to reach, take up a lot of screen estate and overwhelm the non-JavaScript user with a truckload of links he doesn't want to tab through.
  
  
• Flashy fade-in/fade-out effects and animations sounds

You can easily turn the navigation into a graphical one by using background images or even image replacement techniques, though.