Home arrow DHTML arrow Page 2 - YADM-Yet Another Dynamic Menu
DHTML

YADM-Yet Another Dynamic Menu


YADM is an accessible DHTML dropdown/flyout/explorer solution with complete separation of CSS and JavaScript. 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.

Author Info:
By: Christian Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 18
October 13, 2004
TABLE OF CONTENTS:
  1. · YADM-Yet Another Dynamic Menu
  2. · Using YADM -- Changing the Look and Feel
  3. · How it Works
  4. · Working with other Scripts, and What it Does Not Do

print this article
SEARCH DEVARTICLES

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 nameelementdesired effect
dhtmlmain ULindicates 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;}
isParentany LI containing a nested listindicates that this LI contains a menu and is not just a link. In the above example this class adds the downward arrows.
isActiveLI containing the currently visible nested listindicates the current open menu item, in this case here it changes the background of the LI to a light yellow.
hiddenChildall nested lists (UL element)hides the element, apply any CSS technique you want (off-left, or display:none or or or).
shownChildcurrently 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.


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials