Cross Fading Navigation with DHTML
(Page 1 of 5 )
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!
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/Services
- Products
- Business Services
- Residential services
Success Stories
Anyhow, the choices are obviously up to you, but let’s get to work with these.
Next: Putting our Items in Place >>
More DHTML Articles
More By Justin Cook
