Home arrow DHTML arrow Page 3 - 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 - How it Works
(Page 3 of 4 )

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.


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