Home arrow DHTML arrow Cross Fading Navigation with DHTML

Cross Fading Navigation with DHTML

Need to build smooth and attractive fading techniques into your web site using nothing more than script? This article will explain a proven cross-browser method, with ready-to-use code. If you think you donít need this, you will conclude otherwise after reading the article!

Author Info:
By: Justin Cook
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
March 10, 2004
  1. · Cross Fading Navigation with DHTML
  2. · Putting our Items in Place
  3. · Into the Code
  4. · The Fading Function
  5. · In Retrospect...

print this article

Cross Fading Navigation with DHTML
(Page 1 of 5 )

If youíve perused the recently re-launched Macromedia website, youíve witnessed their smooth and sexy navigation component built in Flash. If you havenít seen it yet, basically Iím talking about an extruded bar containing top level navigational items. As you move your mouse over each item, an array of sub-choices fades discreetly into view. If you change your mind, and in turn the co-ordinates of the mouse pointer, the sub-choices fade away.

This is not a difficult thing to accomplish in Flash. However, there are a few advantages to using dynamic HTML instead. We drastically reduce file sizes (only HTML and JavaScript), and itís extremely easy to maintain. You can also customize and re-use this script for many purposes, which Iíll cover in the conclusion.

Our Project

Basically, we want to accomplish the same wonderful effects that Flash has, but with DHTML only. To do this, weíre going to work with the opacity of these items. Both IE and Mozilla allow us to do this, albeit with separate methods.

Letís work with the typical navigational structure of a service providerís website. (Note: you could definitely use this on your personal web page, where youíre showing off photos of your family and pet tuatara)

[Company Name]

  • Home
  • About the Company
  • Locations
  • Contact


  • Products
  • Business Services
  • Residential services

Success Stories

  • Recent
  • Archived

Anyhow, the choices are obviously up to you, but letís get to work with these.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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