YADM-Yet Another Dynamic Menu - Using YADM -- Changing the Look and Feel

(Page 2 of 4 )

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.

Next: How it Works >>
 

More DHTML Articles
More By Christian Heilmann

Comments On: YADM-Yet Another Dynamic Menu

· Nice menu, I want to use this one, but are there some sample menu's?SO I can...    · The [url=http://www.onlinetools.org/tools/yadm/]YADM homepage[/url] has loads of...    · http://www.onlinetools.org/tools/yadm/examples.html is the URL.    · implementing this one a few new sites.if i get a chance, i'll submit a sample:...   >>> Post your comment now!