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.
Next: Working with other Scripts, and What it Does Not Do >>
More DHTML Articles More By Christian Heilmann |
| | | | | | | 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...
|
| | |  | | | |